hi. im kinda new to css and have been trying to create the following layout for a site.

 

i want a header at the top going all the way across the screen.

then 2 divs underneath, one 185px wide(#sidebar) and the other filling the rest of the area(#content).

then a footer which goes all the way across the bottom.

i have created a div for each and a div around all of them called #container.

 

the problem(s):

i have floated the #sidebar to the left and given the #content div a margin of 180px. This makes it sit where i want it to with regards to the #sidebar div. however it seems to drop a little bit away from the header leaving a gap. there is no margin or padding on either div, apart from the 108px margin to bring it out from behind the #sidebar.

 

i have tried absolute positioning which works fine until i auto center the #container, then it throws everything out and i go mad.

 

ive been reading about haslayout and what triggers it etc and cant get my head round it.

 

any help ta

Haven't tested this but off the top of my head I would for something like (based on a 960px width, centered)...

 

#container {
 width: 960px;
 margin: 0 auto 0 auto;
 padding: 0;
}
#header {
 width: 960px;
 height: 80px; /* Or whatever height you want */
}
#sidebar {
 width: 185px;
 margin: 0;
 padding: 0;
 float: left;
 display: inline;
}
#content {
 width: 775px;
 margin: 0;
 padding: 0;
 float: left;
 display: inline;
}
#footer {
 clear: both;
 width: 960px;
 margin: 0;
 padding: 0;
}

 

With your html...

 

<div id="container">
 <div id="header"></div>
 <div id="sidebar"></div>
 <div id="content"></div>
 <div id="footer"></div>
</div>

 

I would recommend using a reset stylesheet as well, saves having to fill your own with repeated margin, padding and border statements.

 

Hope this helps, like I say I just typed it straight in here without testing it - but if I can help at all give me a shout.

 

Gordon

Haven't tested this but off the top of my head I would for something like (based on a 960px width, centered)...

 

#container {
 width: 960px;
 margin: 0 auto 0 auto;
 padding: 0;
}
#header {
 width: 960px;
 height: 80px; /* Or whatever height you want */
}
#sidebar {
 width: 185px;
 margin: 0;
 padding: 0;
 float: left;
 display: inline;
}
#content {
 width: 775px;
 margin: 0;
 padding: 0;
 float: left;
 display: inline;
}
#footer {
 clear: both;
 width: 960px;
 margin: 0;
 padding: 0;
}

 

With your html...

 

<div id="container">
 <div id="header"></div>
 <div id="sidebar"></div>
 <div id="content"></div>
 <div id="footer"></div>
</div>

 

I would recommend using a reset stylesheet as well, saves having to fill your own with repeated margin, padding and border statements.

 

Hope this helps, like I say I just typed it straight in here without testing it - but if I can help at all give me a shout.

 

Gordon

 

hi gordon thanks for replying. i been looking around and i think its like you have done where i am going wrong. i have not been floating left the main content container, just the sidebar so it looks all wonky. i cant try this remedy til i get home but from what i have seen im guessing your right.

 

thanks for your help

 

daver