floating a center div

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Gary - 26 Jul 2007 05:58 GMT

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

Reply to this Message

Jason Priem - 26 Jul 2007 17:08 GMT

> I am new at this, css, and am having trouble doing what I want to do.
>
[quoted text clipped - 9 lines]
>
> 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

Reply to this Message

Ben C - 26 Jul 2007 21:58 GMT

>> I am new at this, css, and am having trouble doing what I want to do.
>>
[quoted text clipped - 16 lines]
> 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.

Reply to this Message

Jason Priem - 26 Jul 2007 23:42 GMT

>>> I am new at this, css, and am having trouble doing what I want to do.
>>>
[quoted text clipped - 24 lines]
>
> 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.

>> background:url(../img/bamboo.gif) 50% 0;
>> }
[quoted text clipped - 3 lines]
>
> 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.

Reply to this Message

Gary - 27 Jul 2007 00:59 GMT

> 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

Reply to this Message

Jason Priem - 27 Jul 2007 06:59 GMT

>> Hi Gary,
>> I'm pretty new to this, too, but maybe I can be of some help. It look
[quoted text clipped - 12 lines]
>
> 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.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2007

floating a center div