Div Height/Overflow issue

Question

The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.

I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.

I have tried not having the height css in the code, but it still won't expand vertically.

In order to get the backgrounds to even show up I have to manually set the height.

This is the page: http://www.repipespecialists.com/landing/google/repiping.html

This is the CSS code:

#top_container {
    width:100%;
    height:1040px;
    background-image:url(../images/top_bg_repeat.jpg);
    background-repeat:repeat-x;
    background-color:#83b4e9;
}

#top_header {
    width:1200px;
    height:1040px;
    background-image:url(../images/header_bg.jpg);
    background-repeat:no-repeat;
    background-color:#83b4e9;
    margin: 0 auto;
}

Sorry, but I'm not sure I understand what you're trying to do. Could you please post a picture of what you have versus what you're trying to get? A code snippet of the relevant markup and CSS (or a simplified sample) would be very helpful as well. — Zhihao
– Zhihao, Commented Jul 24, 2012 at 1:18
I am trying to get the top_container and top_header divs, to automatically expand vertically with the content. As opposed to me having to specify a height — user1454988
– user1454988, Commented Jul 24, 2012 at 1:25

Zhihao · Accepted Answer · 2012-07-24 02:18:15Z

I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.

When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.

Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.

Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:

WDan · Accepted Answer · 2012-07-26 09:16:06Z

0

I think the problem is you use float in 'left_content' and 'right_content'

Use “overflow: hidden” in the wrapper div.

edited Jul 26, 2012 at 9:16

answered Jul 24, 2012 at 1:31

WDan

5731 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Div Height/Overflow issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related