homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
3 column fluid layout with header and footer
supermanjnk




msg:1214177
 5:14 pm on Dec 29, 2004 (gmt 0)

fluid 3 column layout using divs.
This works at least in firefox 1.0 and IE6, I haven't tested it in anything else. Enjoy.

The CSS:
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
margin:10px 10px 0px 10px;
padding:0px;
background-color:#9ECBE2;
}

#leftcontent {
margin-top:5px;
left:10px;
width:200px;
float:left;
}

#centercontent {
margin-left: 199px;
margin-right:199px;
margin-bottom: -19px;
/* box model hack*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 204px;
margin-right:135px;
margin-top:5px;
}
html>body #centercontent {
margin-left: 207px;
margin-right:137px;
margin-top:5px;
}

#rightcontent {
margin-top:5px;
float: right;
width:130px;
}

html>body #centercontent {
top:-2px;
}

#banner {
background:#fff;
height:40px;
voice-family: "\"}\"";
voice-family: inherit;
height:80px;
border:0px double #000;
}
html>body #banner {
height:80px;

}
#banner2 {
background:#fff;

margin-bottom:10px;
height:40px;
voice-family: "\"}\"";
voice-family: inherit;
height:80px;
border:0px double #000;
}
html>body #banner2 {
height:80px;

}

#contentdivs{
background-color:#fff;
margin:0px;
border-style:double;
margin-bottom:5px;
padding:0px;
}

the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Site</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="banner">Header</div>
<!--START LEFT SIDE BAR -->
<div id="leftcontent">
<div ID="contentdivs">
this is expands with content<br>
</div>
<div ID="contentdivs">
this is expands with content<br>
</div>
<div ID="contentdivs">
this is expands with content<br>
</div>
</div>
<!--END LEFT SIDE BAR -->
<!--START RIGHT SIDE BAR -->
<div id="rightcontent">
<div ID="contentdivs">
this is expands with content
</div>
<div ID="contentdivs">
this is expands with content
</div>
</div>
<!--END RIGHT SIDE BAR -->
<!--START CENTER CONTENT -->
<div id="centercontent">
<div ID="contentdivs">
this is expands with content
</div>
<div ID="contentdivs">
this is expands with content
</div>
</div>
<br style="clear:both">
<div id="banner2">footer</div>
</div>
</body>

</html>

 

jimbo_mac




msg:1214178
 5:21 pm on Dec 29, 2004 (gmt 0)

nice supermanjk, works on mac IE 5.1 and opera as well :-)

SuzyUK




msg:1214179
 11:23 am on Dec 31, 2004 (gmt 0)

supermanjnk, nice thanks..

I ran some more tests, and I've added it to the repository thread [webmasterworld.com]. (with some minor adjustments)

the box model hack was not necessary in this demo so it was displaying slightly off in IE5.x/Win and re: the content divs changed to class from an ID, there should only be one instance of an ID per page..

Thanks for posting it
Suzy :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved