4-column CSS layout help - gfx elite forums

mr_serge · #1 (**permalink**) June 7, 2007, 00:32

I'm quite silly in case of CSS work, can anyone give a hint, how to make a cross-browser safe CSS layout as I draw in attachment?
Any help, links, info would be great.
Thanks guys!

lonewolf1120 · #2 (**permalink**) June 7, 2007, 20:34

Hum....This should work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">

</style>
</head>

<body>
<div>
<div style="float:left">
<div style="background-color:#EFFAAC"> </div>
<div style="background-color:#97A16C"> </div>
<div style="float:left; width:180px; background-color:#E8EDAD"> </div>
<div style="float:left; background-color:#F7FFD6"> </div>
<div style="float:left; width:180px; background-color:#E8EDAD"> </div>
<br class="clearit">
</div>
<div style="float:left; width:180px; background-color:#C1A78C"> </div>
<br class="clearit">
</div>
<div style="background-color:#EFFAAC"> </div>
</body>
</html>

el_bastardo · #3 (**permalink**) June 11, 2007, 11:10

Try this one.

Code:

http://home.pages.at/primus1/4column/4column.html

the fluid header and navigation div have a margin-right of 180px. that is where the right sidebar will be.
the flexible center column has a right-margin of 360px because it is followed by the two 180px columns to the right.

if you give the columns no height they will only be as high as there is content in them.

beware if you give padding to the columns! if you give a 5px padding to the left and right your fixed column width will not be 180px anymore but 180px - 2*5px = 170px. thanks to css box model

styles.css

Code:

#left {
	float:left;
	width:180px;
	padding:0px;
	background-color:#dc8;
}
#right {
	float:right;
	width:180px;
	padding:0px;
	background-color:#dda
}
#center {
	margin-right:360px;
	margin-left:180px;
	padding:0px;
	background-color:#eec;
}
#sidebar {
	float: right;
	width: 180px;
	padding: 0px;
	background-color: #99CCFF;
}
#navigation {
	background-color: #FFCC00;
	margin-right: 180px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000000;
	font-weight: bold;
}
#footer {
	clear: both;
	background-color: #CCFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	color: #000000;
	text-align: center;
}
#header {
	background-color: #CCCCCC;
	margin-right: 180px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="sidebar">SIDEBAR<br />SIDEBAR<br />SIDEBAR<br />SIDEBAR<br />SIDEBAR</div>

<div id="header">HEADER: LAYOUT by el_Bastardo</div>

<div id="navigation">NAVIGATION:   NAV1 NAV2 NAV3 NAV4 NAV5</div>

<div id="left">LEFT COLUMN:</div>

<div id="right">RIGHT COLUMN:</div>

<div id="center">  FLEXIBLE CENTER:</div>

<div id="footer">FOOTER</div>
</body>
</html>

Heich · #4 (**permalink**) July 23, 2007, 23:35

Perhaps this one is for you: "YAML -- Yet Another Multicolumn Layout".
It's not just a CSS Style sheet but an (X)HTML/CSS Framework, working with any browser, even with ones that are seldom used like Internet Explorer...

Have a look:

Code:

http://www.yaml.de/en/home.html