Stylesheets - floating a center div

Author

floating a center div

Gary

2007-07-26, 3:17 am

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

Jason Priem

2007-07-26, 6:18 pm

Gary wrote:
> 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
>
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:

<style type="text/css">
#body{
width:100%;
background:url(../img/bamboo.gif) 50% 0;
}
#middle{
width:700px;
margin:auto 0;
}
</style>

I'd also suggest:
-using a jpeg bg instead of that rather heavily pixelated gif.
-naming your divs based on what's in them, rather than where they
are...what if you decide to move them later? Then those labels will be
quite confusing.
-using an <H1> instead of an image for your title, then replacing it
with an image in the CSS.
-not using absolute position unless you have to.

But take all this with a grain of salt, as I'm a beginner like yourself.
As a frequent lurker on this board, I just though it was time I at
least tried to contribute something. Best of luck!
cheers,
j

Ben C

2007-07-26, 6:18 pm

On 2007-07-26, Jason Priem <priemj@bellsouth.net> wrote:
> 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:

That sounds like a good idea and what I was going to suggest.

>
><style type="text/css">
> #body{
> width:100%;

When you say "#body" do you mean "body"?

Normal flow block boxes get an outer margin width equal to the width
available to them anyway, so it isn't normally necessary to set
width: 100% on them. In many cases it can result in annoying horizontal
scrollbars as the box becomes bigger than its container by its total
horizontal borders, padding and margin.

> background:url(../img/bamboo.gif) 50% 0;
> }
> #middle{
> width:700px;
> margin:auto 0;

I think you mean margin: 0 auto, to make it centered.

Jason Priem

2007-07-26, 10:17 pm

Ben C wrote:
> On 2007-07-26, Jason Priem <priemj@bellsouth.net> wrote:
>
> That sounds like a good idea and what I was going to suggest.
>
>
> When you say "#body" do you mean "body"?
Yes. Yes I do.
>
> Normal flow block boxes get an outer margin width equal to the width
> available to them anyway, so it isn't normally necessary to set
> width: 100% on them. In many cases it can result in annoying horizontal
> scrollbars as the box becomes bigger than its container by its total
> horizontal borders, padding and margin.
>
Good point. I wasn't thinking, there.
>
> I think you mean margin: 0 auto, to make it centered.
You think correctly. Gracious, I need to proofread! Sorry about those,
Gary. And thanks for the corrections, Ben.

Gary

2007-07-26, 10:17 pm

> 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

2007-07-27, 3:49 am

Gary wrote:
>
> 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.