CSS: basic fluid based html page layout problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

CSS: basic fluid based html page layout problem

Post 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>
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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.
Post Reply