Multiple rows with CSS floating divs

Question

I would like to implement such design using floating CSS divs:

---------------
|Header       |
---------------
|Col1| Row1   |
|    |--------|
|    | Row2   |
---------------
| Footer      |
---------------

I searched around but found no easy way to do it.

How could i achieve this?

Thanks.

EDIT: I want to clarify my problem. I want to have two rows of images next to menu bar on the left. I am trying to use float:left for image layout.

EDIT2: Solved the problem myslef using display:inline-block for image elements instead of float:left.

Well it is main layout of the page and i don't want to use table for that. — brisky
– brisky, Commented Jul 21, 2011 at 15:49
@Joel: Tables aren't suitable for non tabular data. For all we know his left column will form his main page content area and his right column may be repeated quotes etc. — Brian Scott
– Brian Scott, Commented Jul 21, 2011 at 15:51

Glen Selle · Accepted Answer · 2011-07-21 18:47:38Z

I would start with a container that has the width of the page. For this example, we'll say width:950px. All of the weird widths are caused because of the borders, so if you removed them, all the the widths would be more regular numbers like 400, 950, 350 etc. Here is the live example: http://jsfiddle.net/edgBP/embedded/result/

<html>
<head>
<style type="text/css">
#maincontent {
    width:950px;
    height:100%;
    margin:0 auto;
}
#header {
    width:946px;
    height:150px;
    border:#000 solid;
    border-width:2px 2px 1px 2px;
}
#leftcolumn {
    width:395px;
    height:703px;
    border:#000 solid;
    border-width:1px 1px 1px 2px;
    float:left;
}
#toprow {
    width:549px;
    height:351px;
    border:#000 solid;
    border-width:1px 2px 1px 1px;
    float:left;
}
#bottomrow {
    width:549px;
    height:350px;
    border:#000 solid;
    border-width:1px 2px 1px 1px;
    float:left;
}
#footer {
    width:946px;
    height:150px;
    border:#000 solid;
    border-width:1px 2px 2px 2px;
    clear:both;
}
</style>
<body>
<div id="maincontent">
    <div id="header">Header Content</div>
    <div id="leftcolumn">Leftcolumn Content</div>
    <div id="toprow">Toprow Content</div>
    <div id="bottomrow">Bottomrow Content</div>
    <div id="footer">Footer Content</div>
</div>
</body>
</html>

Joshua · Accepted Answer · 2011-07-21 15:46:21Z

2

Easiest thing for you would probably be to use a framework:

answered Jul 21, 2011 at 15:46

Joshua

4904 silver badges13 bronze badges

2 Comments

Brian Scott Over a year ago

I've plus oned you but I think its still important for him to understand basic CSS before progressing to the frameworks.

Joshua Over a year ago

Oh I totally agree, but that's not really something you're going to be able to do through here, ya know? There's plenty of free CSS learning resources out there.

Brian Scott · Accepted Answer · 2011-07-21 15:50:12Z

2

Here's a simple example of how to achieve this assuming your main width is 400px wide.

HTML:

<div class='container'>

<div class='leftCol'>
.. your left col content ..
</div>

<div class='rightCol'>
<div>.. row 1 content ..</div>
<div>.. row 2 content ..</div>
</div>

</div>

CSS:

.container {width:400px;float:left;}
.leftCol {width:200px; float:left;}
.rightCol {width:200px; float:right}
.rightCol div {float:left; clear:left;}

answered Jul 21, 2011 at 15:50

Brian Scott

9,3697 gold badges50 silver badges70 bronze badges

Collectives™ on Stack Overflow

Multiple rows with CSS floating divs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related