Menu
I am trying to lay out a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be smaller than that on the left. I would like the div on the right to always be tall enough to reach the separator for the row below it. How can I make my background color fill that space?
.rightfloat { color: red; background-color: #BBBBBB; float: right; width: 200px; } .left { font-size: 20pt; } .separator { clear: both; width: 100%; border-top: 1px solid black; }<div class="separator"> <div class="rightfloat"> Some really short content. </div> <div class="left"> Some really really really really really really really really really really big content </div> </div> <div class="separator"> <div class="rightfloat"> Some more short content. </div> <div class="left"> Some really really really really really really really really really really big content </div> </div>Edit: I agree that this example is very table-like and an actual table would be a fine choice. But my "real" page will eventually be less table-like, and I'd just like to first master this task!
Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed. Editing my post in Firefox 2 seems to have worked, FWIW.
Another edit: Yeah, I unaccepted GateKiller's answer. It does indeed work nicely on my simple page, but not in my actual heavier page. I'll investigate some of the links y'all have pointed me to.
634
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
No, you cannot set the border height.
With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flex on the parent, and flex: 1 on the child elements. They'll automatically take up all the available space in their container.
Ahem...
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".
112
Give this a try:
html, body, #left, #right { height: 100% } #left { float: left; width: 25%; } #right { width: 75%; }<html> <body> <div id="left"> Content </div> <div id="right"> Content </div> </body> </html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
