CSS footer at bottom of FORM, not body / page
I am having problems with multiple forms on the same page where I am trying to get an element footer
at the bottom of an element with the section
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>
Image is height
more than form inheritance height
. I've tried position
with no luck and it seems like there Flexbox
might be a way, although I haven't been able to figure it out myself. Also, I need footer
it to background-color
display 100% of the accessible width
section.
Since there are multiple forms on the same page with this exact setup HTML (with footer
inside elements form
and fieldset
), I'm not trying to get footer
at the bottom of the page, as well as ten thousand other questions here in the Stack, only within the element itself section
.
No JavaScript, I need this to be a pure CSS solution.
Here's the script: 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;}
source to share
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 for elements in the section ...
source to share
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 does not work on s . You can use another element for example . display: flex
fieldset
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="http://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="http://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="http://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>
source to share