Question

Here’s a simplified layout of a site:

#left_column {
  width: 200px;
  height: 100%;
}

<div id="left_column">
</div>

<div id="right_column">
  /* A bunch of 100px width photos that are being floated */
</div>

So as the code implies, I have a left column and a right column. The left column should be 200 pixels wide and go to the bottom of the screen. The right column should take up the rest of the width and will contain a bunch of floated images (kind of like what Google image search looks like). How can I do this with CSS and HTML? I’d rather not use JavaScript.

Answer 1

Just add a 200px margin to the left edge of the right column, and float the left column.

#left_column {
  width: 200px;
  float: left;
}

#right_column {
  margin-left: 200px;
}

The 100% height is not going to work the way you think it will work.