CSS Problem: 100% Width, Floating and Centered

[jba_site]

Hi Folks,

I was hoping you could give me a hand with the following web page, and a problem I'm having with the CSS when the window is sized smaller than the content.

The web page has divs with background colors that are meant to run to 100% of the width. However, when the window's horizontal aspect is smaller than that of the content, the background stops short:



I believe this could be something to do with the left-floating inner-sections. You can see this on the live site at:

www.jamesbaldwinantiques.com/articles.php

Any ideas?

Many Thanks.

[Major Payne]

Can't center elements when 100% width or floated left/right:

Centering:

Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

body {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Example as a Class:

.selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class:

<div class="selector_name">Content here</div>

Example as an ID:

#selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class:

<div id="selector_name">Content here</div>

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

Validating:

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3.org/#validate_by_uri+with_options

Choosing Dimensions for Your Web Page Layout:

In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Care With Font Size: http://www.w3.org/QA/Tips/font-size
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/

Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/

Adapt.js - Adaptive CSS: http://adapt.960.gs/