tricky floating problems for div alignment

I have a question concerning floating, and orginizing it. From what I understand floating can be used to allow div layers to sit side by side. I got the div layers to line up all side by side by putting in the html 1 after another and floating all of them left. The html is like this if I am unclear...

{div1} float: left;
{/div1}

{div2} float: left;
{/div2}

{div3} float: left;
{/div3}

Now I know that that isnt proper syntax of course. My cliant wants the divs to be easy to work with, and to be aligned in a specific way. We came up with this picture after some planning, and I have a few questions on how to pull it off.

http://i65.photobucket.com/albums/h2...y/DSCN1202.jpg

Thats the picture. Now he wants them to use both vertical and horizontal alignment. Now whenever I add in another div and try to align it below the other divs, I can never get it to work properly. Is there any clean way where I can pull this off?

If you need a link I guess that I can put one up, but if I dont need to, I would rather hold the page off the domain untill its compleated.

Hey, I learned something new searching all over the internet. I figured out what the clear: both; tag is all about (I was literally jumping for joy).

I still have a question though. Now I can get them to run horizontally, then vertically. Thats no problem. But lets say I wanted to make another row of my divs. Kind of like this...


DIV1 - DIV2 - DIV3

DIV4 - DIV5 - DIV6

DIV7 - DIV8 - DIV9


Currently with the clear:both, it only allows me to do the floating once... I float 1, 2 and 3, then I clear on 4. That works perfectly, but no matter what I try, either 5-9 begin to align beside 3, or they neatly stack right under 4...

I'm just using inline CSS for simplicity here, but you'll need something along these lines:

Code: Select all

<div id="wrapper" style="width: 700px;">
    <div id="left" style="float: left;">
        <div class="box">
            <p>Recent News</p>
        </div>
        <div class="box">
            <p>Events</p>
        </div>
        <div class="box">
            <p>Products</p>
        </div>
    </div>
    <div id="right" style="float: right;">
        <div class="box">
            <p>Content</p>
        </div>
        <div class="box">
            <p>Ads</p>
        </div>
    </div>
    <div class="clear" style="width: 100%; height: 1px; margin: 0 0 -1px 0; clear: both;">
</div>

Exactly! Thanks very much, I was struggeling a lot to get some sort of layout like that. With that in mind, I can do even more. Thank you so much! You helped me with my new years deadline!!!

No problem