Getting site container to fit content

[LauraFig]

This has got to be an old question, but I must be asking it wrong because I've searched and can't find an answer.

I want the site "container" or "wrapper" to expand and contract to fit the height of the content. In other words, if you have a site with multiple pages, some pages might just be a few inches high while others could be very long. I want the container to adjust to fit the contents.

When I searched I found some suggestions to make the container height 100%, but while this did expand the container, it would resize with the browser window leaving the content "un-contained."

So how do you achieve this and is there a method that works in most browsers?

Thanks,
Laura

[ralph.m]

Hi Laura. It sounds like a simple issue. If you have a container and floated content inside it, the container won't wrap around the content. Rather, the content will hang out of it—unless you force the container to wrap around it. The easiest way to do that is with overflow: hidden on the container. E.g.

#container {overflow: hidden;}

If that doesn't help, then show us an example of what you are describing. The situation you describe is vary basic for websites.

[LauraFig]

Hi Laura. It sounds like a simple issue. If you have a container and floated content inside it, the container won't wrap around the content. Rather, the content will hang out of it—unless you force the container to wrap around it. The easiest way to do that is with overflow: hidden on the container. E.g.

#container {overflow: hidden;}

If that doesn't help, then show us an example of what you are describing. The situation you describe is vary basic for websites.

Thanks very much. This didn't actually work in this particular case, but your suggestion helped me find another solution--putting an empty <br class="clearboth"/> after the last floating element. Seems to work!

[ralph.m]

That's certainly another way to do it, though not the favored one (since it adds unnecessary markup to the HTML). Another common tactic is to use the "clearfix" method.

E.g.

#content:after {
    content:" "; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}

or the more generic version (you just add the .cleardif class to any element that needs clearing):

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */