Help with element height

gnolan

I'm having some trouble with specifying an element height.

I have an article element inside a section element like below. The problem, i think, is that the height of the section element doesn't span the height of the content contained within it.

<section id="content">
     <article id="content_left">
          ......................
          ......................
     </article>
     <nav id="sidebar">
          .................
          .................
     </nav>
</section>

<footer>
     .............
     .............
</footer>

This is part of the layout for several pages of my website. The problem is that the amount of information inside the article element varies from page to page, so i can't set a fixed height. The result is the footer element encroaching on both the article and nav elements of the page.

Is there any way to specify an automatic or 100% height for the section element so that it stretches to accommodate whatever information is contained within it?

Would appreciate some help with this. Thanks

CSS

section#content {
	width: 950px;
	display: block;
	margin: 0 auto;
	padding: 0;
}

article#content_left {
	display: block;
	float: left;
	width: 600px;
	height: 600px;
}

nav#sidebar {
	float: right;
	text-align: right;
	width: 300px;
	margin: -13px 0px 0px 0px;
}

Giblet

Take out the floats, or use the following

<section id="content">
     <article id="content_left">
          ......................
          ......................
     </article>
     <nav id="sidebar">
          .................
          .................
     </nav>
     <div class="clear"></div>
</section>

CSS

.clear { clear:both; }

You also don't need section#content etc, it's redundant, #content will do.

(Selectors evaluate right to left, stopping after the #)

gnolan

That works perfectly, thanks very much.

Can you explain to me why I was encountering this problem and why your solution worked? Thanks.

Giblet

When you float block elements, you are telling the elements to collapse the height and allow adjacent elements to run along side the floated elements.
You have no content which is not floated in the container, so it effectively has no height.
clear clears any floated elements to the direction specified, and continues the flow to the next block level available, which is what gives the container it's height.
There are other ways to accomplish this using heights, widths and overflows, as well as the common "clearfix" class which can be applied to the container, but this starts to get a bit complicated in older browsers.

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
}

<section id="content" class="clearfix">

gnolan

Giblet wrote: »

When you float block elements, you are telling the elements to collapse the height and allow adjacent elements to run along side the floated elements.
You have no content which is not floated in the container, so it effectively has no height.
clear clears any floated elements to the direction specified, and continues the flow to the next block level available, which is what gives the container it's height.
There are other ways to accomplish this using heights, widths and overflows, as well as the common "clearfix" class which can be applied to the container, but this starts to get a bit complicated in older browsers.

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
}

<section id="content" class="clearfix">

That's something i'll have to look into properly i'd say. Thanks for your help