We help IT Professionals succeed at work.

Website Bug in Wrapper repeating

axessJosh
axessJosh asked
on
148 Views
Last Modified: 2014-05-15
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:

http://dempcy.idxbroker.com/idx/details/listing/a135/4303031/910-FAR-OAKS?widgetReferer=true

Any help is appreciated.
Comment
Watch Question

Dan CraciunIT Consultant
CERTIFIED EXPERT

Commented:
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.

HTH,
Dan

Commented:
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

Computer Engineer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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.
Kiran Paul VJComputer Engineer
CERTIFIED EXPERT

Commented:
@axessJosh did you try my solution? I should extend completely
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.