- This topic is empty.
-
AuthorPosts
-
August 15, 2008 at 3:45 pm #23093steveMember
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.cssAugust 15, 2008 at 7:49 pm #49238steveMemberHey 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,
—
SteveAugust 16, 2008 at 5:52 pm #49248steveMemberEverything 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?
August 16, 2008 at 10:03 pm #49250steveMemberI think I figured out a solution. I changed the background color from #fff to #6d84b4 for the body.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.