CSS footer at bottom of FORM, not body/page

Question

I'm having trouble with multiple forms on the same page where I'm trying to get the footer element to be at the bottom of the section element of the following HTML:

<h2>Header</h2>
<section>
<img alt="" class="left margin" src="placeholder.png" />
<form action="/" method="post">
<fieldset>
<footer class="center"><input type="submit" /></footer>
</fieldset>
</form>
</section>

The image height is greater than the form's inherit height. I've tried position without luck and it seems Flexbox may be the way to go though I haven't been able to figure it out on my own. Additionally I need the footer to have it's background-color visible across 100% of the available width of the `section.

Since there are multiple forms on the same page with this exact HTML setup (with the footer within the form and fieldset elements) I'm not trying to get the footer at the bottom of the page like the ten thousand other questions here on Stack, only within the section element itself.

No JavaScript, I need this to be a pure CSS solution.

Here is the Fiddle: https://jsfiddle.net/11es8k8e/

CSS

* {border: 0; padding: 0; margin: 0;}
footer {background-color: #eee;}
form fieldset input {background-color: #ffc;}
img {heght: 100px; width: 100px;}
section {border: #ccc solid 1px; margin: 32px; overflow: auto;}
.left {float: left;}
.center {float: center; text-align: center;}
.right {float: right;}

isn't already at the bottom? sorry, but I think I'm missing something — chiliNUT, Jun 18 '15 at 01:38
@John Can you update this [fiddle](https://jsfiddle.net/lmgonzalves/L3weg5m7/) to show us your problem? — lmgonzalves, Jun 18 '15 at 01:40
There is no `float: center`. And [classes should not be presentational](http://blog.terriblelabs.com/blog/2012/01/04/step-away-from-the-presentational-classes/), e.g. `left`, `center`, `right` are bad classes. — Oriol, Jun 18 '15 at 10:23

lmgonzalves · Accepted Answer · 2015-06-18T02:24:28.953

1

I think you can use this piece of CSS:

img {
    position: relative;
    z-index: 1;
}

section{
    position: relative;
}

footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: red;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/11es8k8e/4/

edited Jun 18 '15 at 02:24

answered Jun 18 '15 at 01:48

lmgonzalves

6,518
3
22
41

Done! Please remove the comments to keep it clean ;) – lmgonzalves Jun 18 '15 at 02:24

score 0 · Answer 2 · answered Jun 18 '15 at 02:18

0

I think this will help you...

* {border: 0; padding: 0; margin: 0;}
footer {background-color: #eee;}
form fieldset input[type="submit"] {background-color: #ffc; display:block; position:absolute; bottom:0px; width: calc(100% - 100px);}
img {height: 100px; width: 100px;}
section {border: #ccc solid 1px; margin: 32px; overflow: auto; position:relative;}
.left {float: left;}
.center {float: center; text-align: center;}
.right {float: right;}

You need to set positions to the elements within the section...

answered Jun 18 '15 at 02:18

Ka' de Xaeoc

43
3

1

Unfortunately @Imgonzalves tried that too, it's a static solution and I don't do static. The image dimensions can change and so I'd have to change more than one thing (`calc`). Thank you for trying regardless. – John Jun 18 '15 at 02:26
the img had a static size... how will it change? – Ka' de Xaeoc Jun 18 '15 at 02:43
In the question I stated, "**there are multiple forms on the same page**" with the exact same HTML and thus images...but the images in each form could be used for different purposes. Dynamic code is more difficult but worth the trouble in the end when you begin to realize how much you can truly get out of it. :-) – John Jun 18 '15 at 05:37

score 0 · Answer 3 · edited May 23 '17 at 12:05

With flexbox it would be something like

section, form {
  display: flex;
}
form > :first-child {
  display: flex;
  flex-direction: column;
}
form, form :first-child {
  flex-grow: 1;
}

However, display: flex does not work on fieldsets. You can use another element, like div.

* {
  border: 0;
  padding: 0;
  margin: 0;
}
footer {
  background-color: #eee;
  text-align: center;
}
form input {
  background-color: #ffc;
}
img {
  height: 100px;
  width: 100px;
}
section {
  border: #ccc solid 1px;
  margin: 32px;
  overflow: auto;
}
section, form {
  display: flex;
}
form >:first-child {
  display: flex;
  flex-direction: column;
}
form, form :first-child {
  flex-grow: 1;
}

<section>
  <img alt="placeholder avatar" src="https://i.stack.imgur.com/5m07n.gif" />
  <form action="" method="get">
    <div>
      <div>
        <label for="test1">Test 1</label>
        <input id="test1" />
      </div>
      <footer>
        <input type="submit" value="Submit Form" />
      </footer>
    </div>
  </form>
</section>
<section>
  <img alt="placeholder avatar" src="https://i.stack.imgur.com/5m07n.gif" />
  <form action="" method="get">
    <div>
      <div>
        <label for="test2">Test 2</label>
        <input id="test2" />
      </div>
      <footer>
        <input type="submit" value="Submit Form" />
      </footer>
    </div>
  </form>
</section>
<section>
  <img alt="placeholder avatar" src="https://i.stack.imgur.com/5m07n.gif" />
  <form action="" method="get">
    <div>
      <div>
        <label for="test3">Test 3</label>
        <input id="test3" />
      </div>
      <footer>
        <input type="submit" value="Submit Form" />
      </footer>
    </div>
  </form>
</section>

CSS footer at bottom of FORM, not body/page

3 Answers3