Right way to structure css for 2 Divs on top of 3 Divs?

Hi all,

I’d like to create a page layout like the one in the pic below:

http://www.frontbeach.co.nz/2div+3div.gif

I wondered if the CSS experts here would be kind enough to take a look and see if what I’ve outlined would work. That is, a container with two content divs sitting on top of a container with three content divs. It’s the stacking of divs that has me stumped.

In my pic, probably the header, navigation and footer should also be placed in their own separate divs.

Any help or examples greatly appreciated!!

Thanks

Peter

Hi,

The elements that are horizontal should be floated using the correct dimensions and to make sure that the next set of elements start on the next line enclose each row of floats in a parent container that has a clearing mechanism (such as overflow:hidden or the clearfix method documented in the faq).

This will ensure that the next row of floats don’t snag on any elements that are higher than others.

Don’t set heights for the elements unless they are a fixed height and not going to grow.

Your digram looks more or less correct although the main container div seems superfluous at the moment as it isn’t really needed.

Here’s a quick example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
body {padding:20px 0}
p {margin:0 0 1em}
h1 {font-size:24px;}
#outer {
    width:960px;
    margin:auto;
    border:1px solid #000;
    padding:10px;
}
#header {
    background:#032e90;
    width:960px;
    margin:0 0 10px;
    text-align:center;
    color:#fff;
    padding:10px 0;
}
#header h1 {margin:0}
#nav {
    list-style:none;
    margin:0 0 10px;
    overflow:hidden;
    background:#84aaff;
    padding:10px 0;
    width:960px;
}
#nav li {
    float:left;
    margin:0 10px;
    display:inline;
}
.main {
    clear:both;
    width:960px;
    overflow:hidden;
    margin:0 0 10px;
    background:#f2f2f2;
}
.content {
    width:455px;
    padding:10px;
    display:inline;
    background:#b9f1ff;
    float:left;
}
.clast {margin-left:10px}
.main2 .content {
    width:293px;
    margin:0 10px 0 0;
    background:#acffb8
}
.main2 .clast {margin:0}
#footer {
    width:960px;
    background:#04e724;
    text-align:center;
    padding:10px 0;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Header</h1>
    </div>
    <ul id="nav">
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
    <div class="main">
        <div class="content">
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
        </div>
        <div class="content clast">
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
        </div>
    </div>
    <div class="main main2">
        <div class="content">
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
        </div>
        <div class="content">
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
            <p>Content div 1</p>
        </div>
        <div class="content clast">
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
            <p>Content div 2</p>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>


Thank you so much Paul. Your taking the time to comment, with an example I can use as a stepping stone, is hugely appreciated.

Peter