The Codesee The Codesee - 6 months ago 11
CSS Question

Submit Button not Full Height of Container

I'm attempting to make a submit button fill the full height of it's container using the code below, however it does not do so.



.container {
border: 1px solid;
}
.test {
height: 100%;
}

<div class="container">

<div style="float: right;">
<form method="post">
<input class="test" type="submit">
</form>
</div>

<div style="float: left; width: 95%;">
<p>Hello! This is an example... by the way, I'm from outer space!</p>
</div>

<div style="clear: both;"></div>

</div>





JsFiddle: https://jsfiddle.net/3apqb869/1/

Answer

I like to use flexbox for stuff like this. As long as you're OK with dropping support for IE<=10 it makes styling things like this so much easier. There are also polyfills for it if you aren't.

https://jsfiddle.net/3apqb869/3/

.container {
  display: flex;
  //implicit flex-direction: row;
}

.right {
  display: flex;
  flex-direction: column;
}

Here's a great guide to flexbox.