divide "content" area into two columns?

css, html, layout

Solution

first layout preview (online demo):

html:

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>

css:

/* sizes */
#main-wrap > div { min-height: 450px; }


#header,
#footer {
    min-height: 40px;
}

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

Second layout preview (online demo):

html is quite similar to first layout, but we include one wrapper to `#content-wrap`:

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">
        <div id="info-wrap">
            <div class="info">small info </div>
            <div class="info">small info</div>
        </div>
        Content
    </div>
</div>
<div id="footer">Footer</div>

css is also similar, by the way we added some `css` rules to target new div's:

/* sizes */
#main-wrap > div { min-height: 450px; }

#header,
#footer {
    min-height: 40px;
}

.info { min-height: 80px; }

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

#info-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width: 50%;
    float: left;
}

update: improved styles

Problem

I'm looking at making the transition from HTML tables to pure CSS layouts. So far, the one thing that eludes me is how to layout a page properly. I can do: - header - left navigation - content - footer So like this: ``` ________________________ | Header | |_______________________| | Left | Content | | Nav | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |______|________________| | Footer | |_______________________| ``` However, on some pages I want to be able to divide the "content" area into something like the following: ``` ________________________ | Header | |_______________________| | Left | info | info | | Nav | | | | | | | | | | | | | | | | |______|_________| | | Other info | | | | | | | | | | | | | |______|________________| | Footer | |_______________________| ``` Anyone know how something like this would be done? Or even a nice website that helps with this kind of thing?

Original source