css layout issues [Archive]

Neolumi

January 15th, 2007, 04:57 PM

Hi, I've been looking all over and although I'm finding stuff I cant seem to get it to work :/
What I'm trying to do is code a layout which is say 700px wide aligned to center of the screen, which has a header, then a navigation bar on the left next to the content area. I can't seem to work it out.

like this!
----------
|...........|
----------
|..|........|
|..|....... |
----------

Shard

January 15th, 2007, 05:41 PM

style your html (or body) to text-align:center, then create your main 700px wide div and set its margin to 0 auto, then create inside that your div for the top (with a width of 700px), then create a float div for your nav (float:left; margin-right:20px;) then add your content, and finally make another 700px wide div for the footer. Your content will always need to be 'taller' than your nav div thiough :-)

Shard

January 15th, 2007, 05:43 PM

Id better include a small explanation of whats inside what - lol

<body>
<div id="mainblock">
<div id="header">xxxxxx<div>
<div id="nav">xxxxx</div>
<p>xxxxxxxx</p>
etc
<div id="footer">xxx</div>
</div>

fasterthanlight™

January 15th, 2007, 05:48 PM

html:

<div id="container">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer"> (optional)
</div>
</div>

CSS:

#container
{
position:relative;
margin: 0 auto;
width: 700px;
height: 200px;
}

#navigation
{
position: relative;
float: left;
width: 200px;
height: 500px;
}

#content
{
position: relative;
float: right;
width: 500px;
height: 500px;
}

#footer
{
position: relative;
clear: both;
width: 700px;
height: 100px;
}
something like this!

*edit: shards a bit faster!

Neolumi

January 15th, 2007, 06:07 PM

thanks guys, thats perfect :)