Overlapping <div> Content

[steve]

I am a CSS newbie who’s trying to learn as much as he can. I am running into a couple of challenges that I was hoping a more seasoned CSS developer could coach me on.

I have divided my webpage into horizontal sections (i.e., brand, navigation, content, and footer) that are 100% the browser’s width. #brand-section, #navigation-section, and #footer-section all seem to be functioning as expected, except #footer-section is laying on top of #content-section. I believe this is where my challenge is.

#content-section is 100% the width of the browser and has a background image and background color applied.

.wrapper is centered using auto for left and right margins and has a width of 880px, a min-height of 504px (which I would like this to grow with the content), a background image that is 880px x 484px, and background color to fill vertically as content expands.

.paper-clip is an image placed in the top left corner.

.span-2 is the right column of a two column layout.

.box is a bordered outline around the content.

.box-inner applies some margins and a colored shading to .box.

.box shadow applies a shadow to .box (not working)

.span-1 is a left sidebar column, with another .box, .box-inner, and .box-shadow. I am not sure I placed this correctly?

The challenges seem to be with .wrapper or .span-2 not expanding vertically with the content within .box and .box-inner, because the #footer-section falls at about 504px down from the start of #content-section.

What am I doing wrong? Why is the #footer-section falling on top of #content-section? Is there a better way to structure this to accomplish the same look-n-feel and give the flexibility of variable content? Why isn’t .box-shadow appearing below .box?

HTML = http://www.stevestearns.com/prototype_v2/
CSS = http://www.stevestearns.com/prototype_v2/style_v1/css/main_v4.css

[steve]

Hey Chris,

You were right on the money. I edited the CSS file to remove the absolute from .box. Then I added in another <div> to the CSS and HTML files to move .box down 28px, so it’s positioned where it needs to be visually.

Also, for the time being, I removed the .span-1 section and will position that later.

I posted the fixed CSS and HTML files.

Thank you,
—
Steve

[steve]

Everything that falls within #content-section is now in the correct location, above the #footer-section.

The next challenge I am running into is that #content-section and .wrapper-content have min-heights of 484px, but don’t grow with the content within .span-2 (~873px) and .span-1. The background images appear as they should, but the background color #6d84b4 does not fill the height of .span-2.

I have tried different things:

(a) If I change the min-height for #content-section to 1000px the background color appears and fills the space. However, this does not auto-adjust to the actual content in .span-2 or .span-1.

(b) I have tried removing the min-height and the background image does not appear at all.

(c) I have tried removing the clear: both; and the backgrounds move to the top of the page under #banner-section and #navigation-section.

Any suggestions?

[steve]

I think I figured out a solution. I changed the background color from #fff to #6d84b4 for the body.

[Author]

Posts