The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overlapping <div> Content

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #23093

    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 =
    CSS =


    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,



    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?


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.