Link to home
Start Free TrialLog in
Avatar of axessJosh

asked on

Website Bug in Wrapper repeating

I have a bug in my site and can't seem to find it with any of my tools.  It appears the wrapper is not repeating down the page as I'd like.

Here's a link:

Any help is appreciated.
Avatar of Dan Craciun
Dan Craciun
Flag of Romania image

If you remove min-height and use height:100%;, you'll see the browser calculates the wrapper's div height at 775px, while the content div has 2871px.

Don't know why, though.

The parent element, wrapper, is collapsing because the child elements are floated.

You can fix by adding a clearfix class to the wrapper div.  Then add this to your css file.

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;

Open in new window

Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of axessJosh


I have tried the clearing options.

It worked to bring in the actual min-height rule when I had a specified height, but ended at the full amount.

I realize the floated elements are causing this, but can't figure out how to get it to extend completely.
@axessJosh did you try my solution? I should extend completely