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
It looks like absolute positioning is what you are struggling against here. Once you absolutely position a page element (like you have with .box), it is sort of removed from the flow of the page, so even if it is growing vertically to expand, it's not pushing the footer down accordingly because it is outside of regular page flow and the footer is ignoring it like it should. This layout really shouldn't need any absolute positioning at all, other than maybe for that paperclip.
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.
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.
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
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
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?