Home/ Questions/Q 32643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T13:47:43+00:00

I am trying to lay out a table-like page with two columns. I want

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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’.

    • 0