SearchSearch   

floating a center div

 
   Webmaster Forums (Home) -> CSS RSS
Next:  Divs within Divs and backgrounds  
Author Message
Gary

External


Since: Jul 25, 2007
Posts: 4



(Msg. 1) Posted: Wed Jul 25, 2007 9:58 pm
Post subject: floating a center div
Archived from groups: comp>infosystems>www>authoring>stylesheets (more info?)

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
Back to top
Jason Priem

External


Since: Jul 23, 2007
Posts: 6



(Msg. 2) Posted: Thu Jul 26, 2007 12:08 pm
Post subject: Re: floating a center div
Archived from groups: per prev. post (more info?)

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
Back to top
Ben C

External


Since: Sep 30, 2006
Posts: 838



(Msg. 3) Posted: Thu Jul 26, 2007 3:58 pm
Post subject: Re: floating a center div
Archived from groups: per prev. post (more info?)

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

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.
Back to top
Gary

External


Since: Jul 25, 2007
Posts: 4



(Msg. 4) Posted: Thu Jul 26, 2007 4:59 pm
Post subject: Re: floating a center div
Archived from groups: per prev. post (more info?)

> 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
Back to top
Jason Priem

External


Since: Jul 23, 2007
Posts: 6



(Msg. 5) Posted: Thu Jul 26, 2007 6:42 pm
Post subject: Re: floating a center div
Archived from groups: per prev. post (more info?)

Ben C wrote:
> On 2007-07-26, Jason Priem <priemj.TakeThisOut@bellsouth.net> wrote:
>> 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:
>
> 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"?
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;
>> }
>> #middle{
>> width:700px;
>> margin:auto 0;
>
> 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.
Back to top
Jason Priem

External


Since: Jul 23, 2007
Posts: 6



(Msg. 6) Posted: Fri Jul 27, 2007 1:59 am
Post subject: Re: floating a center div
Archived from groups: per prev. post (more info?)

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.
Back to top
Display posts from previous:   
       Webmaster Forums (Home) -> CSS
Page 1 of 1

 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum