css layout problem - full width sections with auto height? - css

Question

i have a few problems setting up a layout with horizontal sections that should have an automatic height depending on it's content.
This is my page structure.
<div id="#page-wrap">
<header>
<div class="inner">
#navigation
#logo floated right
</div>
</header>
<section id="services">
<div class="inner">
#some floated boxes
</div>
</section>
<section id="main">
<div class="inner">
#secteion content
#aside sidebar
</div>
</section>
<footer>
<div class="inner">
#footer stuff
</div>
</footer>
</div>
header, sections and footer are always 100% wide.
each section has a .inner div which is centered with margin: 0 auto.
.inner {
margin: 0 auto;
padding: 96px 72px 0;
width: 1068px;
color: #3C3C3C;
}
and as example this is my header:
header .inner {
background: #fff url('images/years.png') no-repeat top right;
position:relative;
/*height:100px;*/
}
#logo {
position:absolute;
right:70px;
top:15px;
float:right;
}
THE PROBLEM: if i don't set the header to a specific height the background image get's cut off. If i inspect the header with a develper tool like firebug the navigation inside of it is kind of outside the the header-box. So if i don't set the height of 100px the horizontal navigation cuts off the the background image - even though it's in the same header.
any idea what i have to consider here.

Answer 1

you state that it should have an automatic height depending on its content and then later state the problem is the background gets cut off. so, what exactly are you looking for? a min-height of 100px which expands if the content is larger? or did you expect the nav to be 100px in height (thus forcing the header to 100px)? its a bit confusing... at any rate, the header will have a height of zero if the height is not set and it's children are floats. it sounds to me as if you want the header to be 100px for the purpose of showing the entire background - if so, just set the headers height to 100px (as you've done)
edit// you've also stated that the logo is floated, but then show that its positioned absolutely - which is it? and how is the nav positioned? more information is needed

Answer 2

header, section and footer elements are not container elements - if you want them to behave as if they were you have to set them display: block - this will make them to behave as normal div would

Answer 3

I think this may be a clearfix issue--
you could try adding <div style="clear: both;"></div> before you close your header, or add the following properties to your header
.header {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */
}
however if your navigation will have things that hang out of its container sometimes (like a dropdown), it's best to use something like the method at http://www.positioniseverything.net/easyclearing.html.
finally, you can also try wrapping the whole thing (header, and content) in another div which will only have the background property. that way the bg image will not get cut off.