Page 1 of 1

CSS: basic fluid based html page layout problem

Posted: Tue Sep 13, 2005 7:39 am
by raghavan20
Rather than me explaining wot's wrong, you could understand once you see it.
Also there are conflicts between browsers.
any help is welcome.

Code: Select all

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div{
	border:1px solid #000009;
}
.header{
	width:100%; height:40px;
}
.mainMenu{
	width:100%; height:15px;
}
.parent{
	width:100%; height:auto;
}
.mainDiv{
	width:70%; height:500px; float:left;
}
.subNav{
	width:19%; height:500px;
}
.header{
	width:100%; height:30px; position:absolute; bottom:0px;
}
</style>
</head>

<body>
<div class="header">I am the header</div>
<div class="mainMenu">I hold the menu items</div>
<div class="parent">
	<div class="mainDiv">Here is where main content goes</div>
	<div class="subNav">here is where the sub nav links are displayed</div>
</div>
<div class="clearFooter">I am the footer</div>
</body>
</html>

Posted: Tue Sep 13, 2005 8:11 am
by neophyte
CSS Layout is a pain. I try to stick with established layouts or at least start with one.

http://glish.com/css/7.asp
http://glish.com/css/2.asp

Hope that helps.