Reputation: 2559
Every so often I find myself with this problem and I've never been able to solve it!
Is there any way I can automatically set the height of my container?
Here's a fiddle of an example: http://jsfiddle.net/2x78tcbn/
height: auto;
doesn't work in this scenario.
As I say, widths stay the same, but my heights often change, which is why I leave it out - the page loads as expected - other than the container height.
My issue is whenever any content is added beneath the container it shifts up and doesn't render as expected.
Which can be seen here: http://jsfiddle.net/2x78tcbn/1/
Does anybody possibly have a solution for this as it's been baffling me for quite some time!
Really appreciated,
Thanks!
Upvotes: 0
Views: 36
Reputation: 339
Try to set height runtime with jquery and windows size
$('#mainBanner').height($(window).height()-100);
alert($(window).height());
Upvotes: 0
Reputation: 66228
That is because you need to clear the float. By definition, floated elements are taken out of the document flow and therefore causes the containing parent's height to collapse. A simple trick is to use overflow: hidden
:
#container {
width: 600px;
margin: 0 auto;
overflow: hidden;
}
See fiddle here: http://jsfiddle.net/teddyrised/2x78tcbn/2/
However, in the event that hiding overflowing content is not your desired behavior, you might want to look at other clearfix solutions: http://nicolasgallagher.com/micro-clearfix-hack/
Even better: if cross-browser compatibility is not your main priority, you might want to consider using the latest CSS3 flexbox specification :) http://jsfiddle.net/teddyrised/2x78tcbn/3/
Upvotes: 1