floating a center div

[Gary]

I am new at this, css, and am having trouble doing what I want to do.

I want div columns on the left and right that have a background
image. Then I want a div in the center, of fixed width, with my
content. I want the left and right divs to expand or contract to fill
the space when the browser is resized. Alternately I want the center
div to float over the side divs when the browser's width is less than
the width of the three div's width together.

What I have so far has the side divs covering the center div.
http://www.blueheronhealth.net/test.htm
Gary

[Gary]

Hi Gary,

I'm pretty new to this, too, but maybe I can be of some help. It look
to me as though you're going about this the wrong way. You've got a
tiling background image that you are using to fill two foreground divs.
I think that what you want to do is get rid of the two side divs, and
use your bg image as just that. Kind of like this:

Jason,

That sounds so logical I was wondering why I did it the way I did.
It was because when I put the image in the background it showed
through above and below the center div.

http://www.blueheronhealth.net/test2.htm

Gary

[Jason Priem]

Gary wrote:

>Hi Gary,
I'm pretty new to this, too, but maybe I can be of some help. It look
to me as though you're going about this the wrong way. You've got a
tiling background image that you are using to fill two foreground divs.
I think that what you want to do is get rid of the two side divs, and
use your bg image as just that. Kind of like this:

Jason,

That sounds so logical I was wondering why I did it the way I did.
It was because when I put the image in the background it showed
through above and below the center div.

http://www.blueheronhealth.net/test2.htm

Gary

That's from browser-default margins on the body element. You can fix
that, and similar problems, by clearing out all browser default styling.
You simply set margins, padding, and the like to '0' on all your elements.

There are many ways to do this, but there seem to be two major schools
of thought: one uses the universal selector (*, or "star" to it's
friends), and the other actually names every selector you want to clear.
Both are done at the beginning of your stylesheet. Both have their
pros and cons. I'd suggest googling "clear default css" and similar to
learn more. And again, anyone is more than welcome to correct me if I
got any of that wrong, as I'm a noob to this, myself. Best of luck.