css - divide "content" area into two columns?

- Stack Overflow

1 of 5

http://stackoverflow.com/questions/10594197/divide-content-area-into...

sign up

log in

tour

help

stack overflow careers

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.

divide content area into two columns?

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?
css

layout

html

edited Mar 30 '13 at 21:21

animuson
26.2k

19

asked May 15 '12 at 4:37

Fittersman

67

106

225

19

jsfiddle.net please Shibin Ragh May 15 '12 at 5:00

5 Answers

4/28/2015 12:48 AM

css - divide "content" area into two columns? - Stack Overflow

2 of 5

http://stackoverflow.com/questions/10594197/divide-content-area-into...

first layout preview (online demo):

4/28/2015 12:48 AM

css - divide "content" area into two columns? - Stack Overflow

3 of 5

http://stackoverflow.com/questions/10594197/divide-content-area-into...

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):

4/28/2015 12:48 AM

css - divide "content" area into two columns? - Stack Overflow

4 of 5

html is quite similar to first layout, but we include one wrapper to

http://stackoverflow.com/questions/10594197/divide-content-area-into...

#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

edited May 15 '12 at 14:57

answered May 15 '12 at 11:38

Vladimir Starkov
7,112

25

71

So is the key here to force the sidebar to be an absolute position? That way you can use left float in other
areas and it won't conflict? Fittersman May 15 '12 at 14:17

4/28/2015 12:48 AM

css - divide "content" area into two columns? - Stack Overflow

5 of 5

http://stackoverflow.com/questions/10594197/divide-content-area-into...

@Fittersman i remembered better and simpler (without absolute position) way to handle this markup and
updated the answer. In all areas we can use float without conflict Vladimir Starkov May 15 '12 at 14:58

Give one of the CSS grid systems a go. This site lists some:10 Really Outstanding and Useful
CSS Grid Systems
answered May 15 '12 at 4:41
Paul Marrington
161

http://grids.heroku.com/fluid_grid?column_amount=3
You can add and delete these grids.
edited May 15 '12 at 4:48

answered May 15 '12 at 4:43

miqbal
1,145

14

24

For your content div set that a width then create three divs for the info sections.
The top two give a width and make sure they dont exceed the total of the container content.
float one left and the other right.
underneath the divs add:
<div class="clear"></div>

The css for that is:

.clear {clear:both;}

Under the clear will be your third div which will give you that layout you want.
answered May 15 '12 at 8:09
V0X
344

10

4/28/2015 12:48 AM