Simple CSS layout - how can I achieve this layout, and make it scale easily?

Question

hey guys, how can I just achieve this simple layout? I'm hoping the answer will help me understand the basics of css layout and floats.

    <div id="verticalElement1">
  <div id="horizontalElement1">
   some content
  </div>
  <div id="horizontalElement2">
   some content
  </div>
 <div>
 <div id="verticalElement2">
  <div id="verticalElement3">
   some content
  </div>
  <div id="verticalElement4">
   some content
  </div>
 <div>

Ok, so, as the "id"s suggest, I'd like the vertical elements to sit one on top of each other.

inside the top element, I'd like the 2 horizontal elements to sit next to each other.

I want to achieve this without applying "inline" to any elements.

Also, I don't want to use absolute positioning, unless its relative to some element, and scales nicely.

I'd like to achieve all this with very clean and scalable CSS, in such a way that i can add and remove elements, without having to change style values. Everything should be done by just applying the appropriate classes to certain elements, something like this:

    <div id="verticalElement1" class="containsHorizontalElements">
  <div id="horizontalElement1" class="isHorizontal">
   some content
  </div>
  <div id="horizontalElement2" class="isHorizontal">
   some content
  </div>
 <div>
 <div id="verticalElement2">
  <div id="verticalElement3">
   some content
  </div>
  <div id="verticalElement4">
   some content
  </div>
 <div>

I've tried applying floats but everything goes crazy....help!

cheers

Answer 1

To achieve the Horizontal Elements, you will want to float:left; them, and they will stack against each other.

The Vertical elements can sit ontop of each other simply by declaring either display:block, or width:100%. That will make sure they take up the entire horizontal space, making them stack ontop of each other.

Answer 2

Your vertical containers should simply be displayed as block, which is what div tags are by default. Their inner contents can be either both floated left, or one left and one right. You may also want to set widths on your horizontal elements to ensure that they actually both end up on the same line.

your html can look like this:

<div id="container1" class="container">
    <div class="inner-element"></div>
    <div class="inner-element"></div>
</div>
<div id="container2" class="container">
    <div class="inner-element"></div>
    <div class="inner-element"></div>
</div>

css can look like this:

.inner-element {
    float: left;
    width: 100px;
}

also, you must remember to clear all your containers that contain floats:

.container {min-height: 10px;}

.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

of course, you would want to name your divs something more semantically correct, like "content" or "wrapper" or something like that that actually describes their purpose rather than how they are supposed to look on the page, ie name something "content" instead of "left-column"