Forum Moderators: not2easy
my question is how can i structure the html so that my ui has the nav on top, content in the middle then footer below...
as i would normally do the following
<div id="Container">
<div id="NavBar"></div>
<div id="Content"></div>
<div id="Footer"></div>
</div>
what css do i need so my html will loook like
<div id="Container">
<div id="Content"></div>
<div id="NavBar"></div>
<div id="Footer"></div>
</div>
Is it possible?
#navbar {
height: 60px;
top: 0;
position absolute;
}
#content {
top-margin: 60px;
position: relative;
}
#footer {
position: relative;
}
You can fill in the blanks yourself, but hopefully you can see the principal. If you position NavBar absolutely it takes it out of the document flow, but you need to push the other elements down to make space for it.
finished results.
<style type="text/css">
<!--
#navbar {height:60px; width:396px;top:0; position:absolute; border:2px green solid;}
#content {margin-top:60px; position: relative;border:2px yellow solid; }
#footer {position: relative; border:1px black solid;}
#Container{width:400px; border:3px red solid; position:relative;}
-->
</style>
</head>
<body>
<div id="Container">
<div id="content">content in here</div>
<div id="navbar">Nav items...</div>
<div id="footer">footer</div>
</div>
