CSS Forum

**cathode** · 10:03 PM

Trying to get a layout that is all CSS, but I can't for some reason. I broke it down to the basic code, please tell me whet I'm doing wrong. I've tried this a few ways, going as far as having a bunch of hacks for different browsers, etc, but after beating my head against the wall for 4 hours, I've started over, so here's the layout in it's simplest form.

This is a fixed-width 2-column layout. I'm getting different results in firefox 1 and IE 6, both wrong.

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>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">	<!--
	body{
		background-color: #e0d7cc;
		font-family: Arial, Helvetica, sans-serif;
		margin:0;
		padding:0;
		min-width:780px;
	}
	#wrapper{
		width: 780px;
		position: absolute;
		left: 50%;
		margin-left: -390px;
	}
	#top{
		width: 780px;
		background-color: #FFDAB9;
	}
	#header {
		float: left;
		width: 592px;
		height: 175px;
		background-color: Olive;
	}
	#menu {
		float: left;
		width: 188px;
		height: 175px;
		background-color: #D2B48C;
	}
	#main {
		float: left;
		width: 592px;
		background-color: Silver;
	}
	#sidebar {
		float:left;
		width:188px;
		margin-left:592px;
		background-color: #f23456;
	}
	#footer{
		width: 780px;
		background-color: #AFEEEE;
		clear: both;
	}
	-->
</style>
  </head>
  
  <body>
    <div id="wrapper">
		<div id="top">top</div>
		<div id="header">header</div>
		<div id="menu"><p>menu</p></div>
		<div id="main"><p>main body<br /> main body <br /> main body</p></div>
		<div id="sidebar"><p>Sidebar</p></div>
		<div id="footer"><p>Footer</p></div>
    </div>
  </body>
</html>

**chrishirst** · 09-02-2005, 04:27 AM

And it is supposed to look like????

**DianeD** · 09-02-2005, 01:18 PM

Well, I sure needed the practice, and hope this helps. I checked it in Firefox and it seemed to look ok, as with EI6. If this is not correct, then I'd sure be interested in finding out what I did wrong, too!

test.css file:

body { background-color: #e0d7cc;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
min-width:780px;
}

#wrapper {
width: 780px;
position: absolute;
}

#top { width: 780px;
background-color: #FFDAB9;
margin-top: auto;
}

#header { float: left;
width: 592px;
height: 175px;
background-color: Olive;
}

#menu { float: left;
width: 188px;
height: 175px;
background-color: #D2B48C;

}
#main { float: left;
width: 592px;
background-color: Silver;
}

#sidebar { float:left;
width:188px;
background-color: #f23456;
}

#footer{ width: 780px;
background-color: #AFEEEE;
clear: both;
}

Then the HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="test.css" type="text/css">
<head>
<title></title>

</head>

<body>
<div id="wrapper">
<div id="top">top</div>
<div id="header">header</div>
<div id="menu"><p>menu</p></div>
<div id="main"><p>main body</p></div>
<div id="sidebar"><p>Sidebar</p></div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>

Tell me if it worked for you,
DianeD