Dev Shed Forums

**heyder**

Can someone tell me what's going on with my css lsyout.

http://www3.sympatico.ca/timarney/temp/layout.htm

This is the first time I doing layout with CSS-P so I don't know all the in and outs yet.

The first thing I notice is that in ie... scrollbars apear when there is no need for them.

In Opera the left nav streches well past the area for the main content. Any tips on how to fix/improve this sort of layout would be much apreciated.

Here's the code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>--</title>
<style type="text/css">
body, html{
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	background:#E0E0E0;
}

#container,#header{
	width:760px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}
	
#container{
	height:100%;
	min-height:100%;
	background: #FFFFFF;
}

#header{
	height:155px;
	background:#A9A99F;
}

#leftnav{
	height:100%;
	background: #F5F5F5;
	width:150px;
	float: left;
}

#main{
	text-align: left;
	vertical-align: top;

}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="leftnav">left hand nav</div><div id="main">main</div>
</div>
</body>
</html>

**heyder**

Okay, I've seem to have got it worked out for the most part...

http://www3.sympatico.ca/timarney/temp/layout01.htm

if I remove the header the scrolling will go away..How can I take the height of the header into account when dealing with percentages?

Dev Shed Forums

Thread: css layout issues

css layout issues