Click to See Complete Forum and Search --> : almost!


lukeurtnowski
02-15-2006, 06:12 PM
I have a few issues with http://www.lukesplace.com/Andy_Montanas/Store/index.php

Why is not the whole div (top_selling_prooducts) have a background-color like its h1 and why dont my images appear to be centered.
Thanks

toicontien
02-16-2006, 02:04 PM
I guess to start things off, validate your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lukesplace.com%2FAndy_Montanas%2FStore%2Findex.php) to ensure no HTML errors are to blame.

Also, SPAN tags are inline elements, so change all <span class="top"> to <div class="top">. FORM tags are block elements.

The reason the top_selling_items DIV doesn't have the BG color extend past the product items is because the .top SPANs (they should be DIVs) are floated. Reading up on the CSS Float Model (http://www.w3.org/TR/CSS21/visuren.html#floats) will help solve the problem. In short, floated elements do not exist in the normal flow, therefore the top_selling_items DIV does not extend below the Top Selling Items heading.

The workaround is simple. Just before the closing tag for the top_selling_items DIV, add this markup:

<div id="top_selling_spacer">&nbsp;</div>
Then add the following CSS:


#top_selling_spacer {
clear: both;
height: 1px;
overflow: hidden;
}