Wrapper div background wont grow past initial browser window size

Question

I'm working on a website, trying to get the basic skeleton of my design to enable me to add content and have it grow the div to the length of the content. My problem is that it seems that as soon as the page loads, it only shows the background color of the div for the initial browser window size.. I'm not doing a very good job explaining; honestly because I'm not sure what the problem is, I just know it isn't working correctly.

Thanks!

score 4 · Accepted Answer · edited May 23 '17 at 12:12

4

The problem is you have floated elements inside of #fauxcolumns that you're not clearing. The solution is to clear them.

The easiest way is to add overflow:hidden to #fauxcolumns like this:

#fauxcolumns {
    ...
    overflow: hidden;
    ...
}

This question shows other clearing methods if you want to see options: What methods of ‘clearfix’ can I use?

You also don't need to have height:100% on everything, and definitely not on #fauxcolumns as it will clip content that's below the "fold".

edited May 23 '17 at 12:12

Community

1
1

answered Jan 11 '12 at 16:50

Philip Walton

29,693
16
60
84

new year's resolution... type faster ;) – Luke Duddridge Jan 11 '12 at 16:53
That definitely fixes it, but I want the entire page to scroll to actually display that third row with the white background of the wrapper; which is what I'm having trouble with :/ – bruchowski Jan 11 '12 at 16:55
? `overflow:hidden` will let you do that. can you show us what you are seeing? – Luke Duddridge Jan 11 '12 at 16:58
1

It does for me if I remove `height:100%` and add `overflow:hidden` to `#fauxcolumns`. – Philip Walton Jan 11 '12 at 16:59
Ah, just took out the height:100% 's and now i have the third row, thanks Luke! :) now time to research the overflow property so this doesn't happen again.. – bruchowski Jan 11 '12 at 17:01
Research clearing floats and clearfix methods. Overflow really has little to do with it :) – Philip Walton Jan 11 '12 at 17:02
Ah, you added the 100% height bit. I guess my answer is a bit redundant. – Wex Jan 11 '12 at 17:04

score 2 · Answer 2 · answered Jan 11 '12 at 16:59

In #fauxcolumns, you declared height: 100%. Any time elements use a percentage value, it's relative to their container. Thus, setting height: 100% on #fauxcolumns results in a height that is equal to the height of the browser window. That is partially why your div cuts off where it does. Removing height: 100% is the first step towards allowing the height to grow to the size of the content.

The other reason why this doesn't work is because you have floated elements inside #fauxcolumns that you haven't cleared. I don't particularly see any reason why you need them floated in the first place, but if you do, adding overflow: hidden will ensure that your floats are cleared and the container wraps these elements.

To summarize, remove this height: 100% declaration and add overflow: hidden.

Wrapper div background wont grow past initial browser window size

2 Answers2