CSS and div page / div background color

Hello,

I have problem with divs and I think it's to do with sizing. I have
cut down my HTML to this to illustrate the point:

<div id="container">
<div id="menuBar">
Hello
</div>
<div id="navBar">
special offer 1<br>
special offer 2<br>
special offer 3<br>
special offer 4
</div> <!-- navBar -->
<div id = "mainContent1">
Main content
</div> <!-- mainContent -->
</div> <!-- container -->

There is no styling at all for navBar or mainContent

As you can see everything is contained within the container div, which
is this:

#container
{
border:1px solid #000;
text-align: center;
width:900px;
height: auto
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}

Fixed width, centered within the browser window, backround white.

navbar is styled like this:

#navBar
{
text-align: left;
border:1px solid #000;
float:left;
width: 200px;
margin: 1px;
}

If I change the page background color, I want it to change the color
outside the container div - i.e. the area of the browser not being
used by my container div, but have the container background all white.
What happens though is the height of the container div does seem to
include the navbar - I suppose beacuse it is floated left, and the
container is only white up to the height of the container text - if
the navbar is longer it takes on the page background color. If I
explicitly set the height of the container that handles but I don't
want to do that - I suppsoe I need this navBar aligned left within the
container and have the container size to include the navBar. I'm sure
I'mm missing somethign simple - any ideas anyone?

Cheers

Ray

In article
<0c7cf6bd-7bee-4069-b596-d0c67fb48b60 (AT) l6g2000prm (DOT) googlegroups.com

,
rbrowning1958 <RBrowning1958 (AT) gmail (DOT) com> wrote:

Hello,

I have problem with divs and I think it's to do with sizing. I have
cut down my HTML to this to illustrate the point:

....
If I change the page background color, I want it to change the color
outside the container div - i.e. the area of the browser not being
used by my container div, but have the container background all white.

Suppose the body bg is pink, your container *is* all white. You
have little content in it. The float overflows "container". There
are several things you can do to get the look you want.

1. Put in lots of content into mainContent1

2. Add {overflow: hidden} to #container.

3. Add a small amount of content in an element just before
closing #container and clear the element.

4. Add an empty clearing div just before closing #container for
example, <div style="clear: left;}

What happens though is the height of the container div does seem to
include the navbar - I suppose beacuse it is floated left, and the
container is only white up to the height of the container text - if
the navbar is longer it takes on the page background color. If I
explicitly set the height of the container that handles but I don't
want to do that - I suppsoe I need this navBar aligned left within the
container and have the container size to include the navBar. I'm sure
I'mm missing somethign simple - any ideas anyone?

You are missing that parents do not grow their height to cover
their floated children, in a sense, they are blind to such
children because these are out of the normal flow.

--
dorayme

In article
<doraymeRidThis-919B7E.08502923122007 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

div style="clear: left;}

<div style="clear:left"></div>

--
dorayme

On Dec 22, 4:50*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
0c7cf6bd-7bee-4069-b596-d0c67fb48... (AT) l6g2000prm (DOT) googlegroups.com



,
*rbrowning1958 <RBrowning1... (AT) gmail (DOT) com> wrote:
Hello,

I have *problem with divs and I think it's to do with sizing. I have
cut down my HTML to this to illustrate the point:

...
If I change the page background color, I want it to change the color
outside the container div - i.e. the area of the browser not being
used by my container div, but have the container background all white.

Suppose the body bg is pink, your container *is* all white. You
have little content in it. The float overflows "container". There
are several things you can do to get the look you want.

1. Put in lots of content into mainContent1

2. Add {overflow: hidden} to #container.

3. Add a small amount of content in an element just before
closing #container and clear the element.

4. Add an empty clearing div just before closing #container for
example, <div style="clear: left;}

What happens though is the height of the container div does seem to
include the navbar - I suppose beacuse it is floated left, and the
container is only white up to the height of the container text - if
the navbar is longer it takes on the page background color. If I
explicitly set the height of the container that handles but I don't
want to do that - I suppsoe I need this navBar aligned left within the
container and have the container size to include the navBar. I'm sure
I'mm missing somethign simple - any ideas anyone?

You are missing that parents do not grow their height to cover
their floated children, in a sense, they are blind to such
children because these are out of the normal flow.

--
dorayme

Hello,

Thanks for replying. That's very clear. I actually fixed it in the end
by putting a footer in with a clear:left style.

Cheers

Ray

In article
<5d11689d-c7df-4118-a7c2-9238e6f8a525 (AT) j64g2000hsj (DOT) googlegroups.co
m>,
rbrowning1958 <RBrowning1958 (AT) gmail (DOT) com> wrote:

On Dec 22, 4:50*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

3. Add a small amount of content in an element just before
closing #container and clear the element.

4. Add an empty clearing div just before closing #container for
example, <div style="clear: left;}

I'm sure
I'mm missing somethign simple - any ideas anyone?

You are missing that parents do not grow their height to cover
their floated children, in a sense, they are blind to such
children because these are out of the normal flow.


Hello,

Thanks for replying. That's very clear. I actually fixed it in the end
by putting a footer in with a clear:left style.

Cheers

Ray

Fair enough. I tend to put footers and even the most general and
unchanging navigation outside the main wrapper in this sort of
design. But it is not wrong to go your way (you kill two birds
with the same stone!).

--
dorayme