CSS 3 Column Layout

[Susie56]

I am trying to update my old website from tables to only CSS using DIV tags, I have tried various coding, and this one is the closest, but my left and right columns disappear to the bottom somewhere. Here is the CSS Code I used. Can anyone let me know where I am going wrong? I want the website to look like my old one http://www.i4-webdesign.com which has a 2px border, when I omit the border it looks fine. Also I require it to be 900px wide. Thank you.

body {
margin:0;
padding:0;
line-height: 1.1em;
background-color: #fff;
}
#container {
width: 900px; /*Width of main container*/
margin: 0 auto;
background: #FFF;
}

#wrapper1 {
position:relative;
width:900px;
background:#FFF;

}
#wrapper2 {
position:relative;
text-align:left;
width:900px;
background: #FFF;
}
#header {
background: #FFF;
height: 200px; /*Height of top section*/
margin: 0;
padding-top: 0px;
}
#maincol {
margin: 0 225px 0 185px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcol {
float: left;
width: 185px; /*Width of left column in pixel*/
margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
background: #FFF;
border-right: 1px dotted #97BF97;
}
#rightcol {
float: left;
width: 185px; /*Width of left column in pixel*/
margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
background: #FFF;
border-right: 1px dotted #97BF97;
}

#footer {
clear: left;
width: 100%;
background: #fff;
color: #FFF;
text-align: center;
padding: 4px 0;
}

[coothead]

Hi there Susie56,

and a warm welcome to these forums. ;)

Check out the attachment for a simple example of your requirements.

Also you may find some relevant information regarding the layout here...
CSS Faux Columns (http://www.google.co.uk/search?q=CSS+Faux+Columns)
coothead
 
 

[Susie56]

This is amazing, thank you so much. I am very grateful, it all makes sense now.
Thanks again, Susie :)

[molendijk]

Coothead, nice work.
You can refine this by adding, for instance:
#container {position: absolute; left:0px; right:0px; top:30px; bottom:30px;}
#footer {position:absolute; left:0px; right:0px; bottom:30px;}
===
Arie Molendijk.

[coothead]

Hi there molendijk,

your 'refinement' is not required according to Susie56. ;)

I want the website to look like my old one http://www.i4-webdesign.com ................ Also I require it to be 900px wide.
coothead

[molendijk]

Also I require it to be 900px wide
position:absolute; left:0px;right:0px;bottom:30px; doesn't change the width. It just causes the div to be absolutely positioned while remaining in the center.
Now that it is absolutely positioned, we can specify its position with respect to the top and the bottom.
===
Arie.

[coothead]

Hi there Arie,

how does a div element with this css...


#container {
position:absolute;
left:0;
right:0;
top:30px;
bottom:30px;
}

...have a width of 900px and be horizontally centered? :confused:

coothead

[molendijk]

#container {
position:absolute;
left:0;
right:0;
top:30px;
bottom:30px;
width:900px;
margin:auto;
}
===
Arie.