Multi-Column CSS Layout

Maxal

06-17-2012, 07:58 PM

Hi everyone

I have a 3-column CSS layout with a header and a footer. Now I need a block which sits over the top of the first 2 columns — that are left and the middle columns — but does not cross over the right column, which is the 3rd column.

Similarly, I also need a block which stays under the first two columns but does not run over the last column. Below is my code of 3 columns including header and footer.

Since I am not well versed in CSS, I need your help to achieve the desired layout. Thanx in advance :)

#header {
background-color: #00bff3;
float: left;
height: 100px;
width: 980px;
margin-bottom: 20px;
padding-left: 20px;
}

#content {
float: left;
background: #fff;
width: 320px;
margin-left: 17px;
margin-bottom: 20px;
}

#leftcolumn {
width: 320px;
float: left;
margin-bottom: 20px;
}

#rightcolumn {
width: 320px;
float: left;
margin-bottom: 20px;
}

#footer {
margin-left: 15px;
height: 100px;
width: 980px;
background: #eeeeee;
clear: both;
}

06-17-2012, 10:18 PM

Hey Maxal,

You may want to check out a site like CSSReset.com (http://cssreset.com) or something. If you aren't really a CSS guy, then they can probably help out with some easy to follow video tutorials. It's all FREE! :) It's been really helpful for me.

Good luck!

toddmanning

06-18-2012, 02:21 AM

Here's what I came up for you. Hopefully this helps:

<!doctype html>
<html>
<head>

<style type="text/css">
#header {
border: black 5px solid;
background-color: #00bff3;
float: left;
height: 100px;
width: 980px;
margin-bottom: 20px;
clear: both;
}

#leftcolumn {
border: blue 5px solid;
width: 640px;
float: left;
margin-bottom: 20px;
height: 600px;
}

#rightcolumn {
border: blue 5px solid;
width: 320px;
height: 600px;
float: left;
margin-bottom: 20px;
}

#footer {
float: left;
border: black 5px solid;
height: 100px;
width: 980px;
background: #eeeeee;
clear: both;
}

#spancolumntop {
float: left;
border: black 5px solid;
height: 200px;
width: 630px;
clear: both;
}

#lefthalfcolumn {
float: left;
border: black 5px solid;
height: 200px;
width: 310px;
}

#righthalfcolumn {
float: left;
border: black 5px solid;
height: 200px;
width: 310px;
}

#spancolumnbottom {
float: left;
border: black 5px solid;
height: 170px;
width: 630px;
clear: both;
}

</style>

</head>
<body>
<div id="header">
<p>header</p>
</div>
<div id="leftcolumn">
<div id="spancolumntop">
<p>spancolumntop</p>
</div>
<div id="lefthalfcolumn">
<p>lefthalfcolumn</p>
</div>
<div id="righthalfcolumn">
<p>righthalfcolumn</p>
</div>
<div id="spancolumnbottom">
<p>spancolumnbottom</p>
</div>
</div>
<div id="rightcolumn">
<p>rightcolumn</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>

Maxal

06-18-2012, 03:14 AM

wow........^ this works like a charm :)
Thanks a lot toddmanning :)