text overflows div container - it should wrap?

I have two problems with my site.
the first is that for some reason the text in my body container flows right
out of the box.
I thought that text was supposed to stay inside the container and wrap...

The second problem is that I have made the background-color of the main
container blue and this shows up in IE but for some reason it only takes in
the right nav column and not the rest of the containers
in firefox 3.0.

This is the site. http://www.testbeddesigns.com/patient/test.php
I have trimed it down so only needed content shows. I also stopped the W3C
to validate the document and all is good.

The styles in question are:
/* top level */
#mainContainer {
width: 780px;
background-color: #030d5f;
position:relative;
}
#banner {
width: 100%;
position:relative;
}
/* contains the two nav section and body of document */
..sub1Container {
float: left;
width: 641px;
position: inherit;
}
/* located in sub1 container - it contains one nav container and the body
container */
..sub2Container {
float: left;
}

/* main nav container left and right */
..navContainerLeft {
width: 131px;
float: left;
}
/* body of document */
..bodyContainer {
width: 475px;
background-color:white;
height: 50px;
float: right;
text-align: left;
padding: 15px;
border: solid thin red;
}
/* located in the sub1container */
..navContainerRight {
width: 131px;
background-color: #030d5f;
float: right;
}

/* body of entire web page */
body {
margin: 0px;
background-color: #fff;
}

In article <cN6dnTaZ1tym_MDUnZ2dnUVZ_g2dnZ2d (AT) giganews (DOT) com>,
"krraleigh" <kraleigh (AT) sbcglobal (DOT) net> wrote:

I have two problems with my site.
the first is that for some reason the text in my body container flows right
out of the box.
I thought that text was supposed to stay inside the container and wrap...

What else can it do when you have what the browser thinks is a very very
long word. It respects you and knows you would be pretty angry with it
if it broke up a word. Imag
ine this! Put some realistic spaces in between your "xxxxx..."s

The second problem is that I have made the background-color of the main
container blue and this shows up in IE but for some reason it only takes in
the right nav column and not the rest of the containers
in firefox 3.0.

Add to your #mainContainer" the CSS of overflow:hidden;

Test this by putting in:

<div id="mainContainer" style="overflow:hidden;">

This is the site. http://www.testbeddesigns.com/patient/test.php
I have trimed it down so only needed content shows. I also stopped the W3C
to validate the document and all is good.

Look again about validation at

<http://validator.w3.org/>

I am seeing:

<div style:="" width:780px;="" align="center">

If you use CSS, use it and don't mess about with presentational stuff
like "width=...". Get all your inline styles out of your html if you can
and rely on your CSS sheet.

Don't use stuff like this if you can help it, use margins:

<div class="shimMinHeight">&nbsp;</div>

--
dorayme

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote

In article <cN6dnTaZ1tym_MDUnZ2dnUVZ_g2dnZ2d (AT) giganews (DOT) com>,
"krraleigh" <kraleigh (AT) sbcglobal (DOT) net> wrote:

I have two problems with my site.
the first is that for some reason the text in my body container flows
right
out of the box.
I thought that text was supposed to stay inside the container and wrap...


What else can it do when you have what the browser thinks is a very very
long word. It respects you and knows you would be pretty angry with it
if it broke up a word. Imag
ine this! Put some realistic spaces in between your "xxxxx..."s

The second problem is that I have made the background-color of the main
container blue and this shows up in IE but for some reason it only takes
in
the right nav column and not the rest of the containers
in firefox 3.0.


Add to your #mainContainer" the CSS of overflow:hidden;

Test this by putting in:

div id="mainContainer" style="overflow:hidden;"

This is the site. http://www.testbeddesigns.com/patient/test.php
I have trimed it down so only needed content shows. I also stopped the
W3C
to validate the document and all is good.

Look again about validation at

http://validator.w3.org/

I am seeing:

div style:="" width:780px;="" align="center"

If you use CSS, use it and don't mess about with presentational stuff
like "width=...". Get all your inline styles out of your html if you can
and rely on your CSS sheet.

Don't use stuff like this if you can help it, use margins:

div class="shimMinHeight">&nbsp;</div

--
dorayme

I appreciate the help - all is well but...
If you have the time can you tell me why I need to use overflow: hidden in
the main
container to get results that I am looking for? Is it a Kludge to work
around some flaw
that I should be aware of, or is my coding missing the mark?

Thank You
Kevin

On 2009-01-02, krraleigh <kraleigh (AT) sbcglobal (DOT) net> wrote:

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in message
news:doraymeRidThis-064BA7.12335602012009 (AT) news (DOT) albasani.net...
In article <cN6dnTaZ1tym_MDUnZ2dnUVZ_g2dnZ2d (AT) giganews (DOT) com>,
"krraleigh" <kraleigh (AT) sbcglobal (DOT) net> wrote:

I have two problems with my site.
the first is that for some reason the text in my body container flows
right
out of the box.
I thought that text was supposed to stay inside the container and wrap...


What else can it do when you have what the browser thinks is a very very
long word. It respects you and knows you would be pretty angry with it
if it broke up a word. Imag
ine this! Put some realistic spaces in between your "xxxxx..."s

The second problem is that I have made the background-color of the main
container blue and this shows up in IE but for some reason it only takes
in
the right nav column and not the rest of the containers
in firefox 3.0.


Add to your #mainContainer" the CSS of overflow:hidden;

Test this by putting in:

div id="mainContainer" style="overflow:hidden;"

This is the site. http://www.testbeddesigns.com/patient/test.php
I have trimed it down so only needed content shows. I also stopped the
W3C
to validate the document and all is good.

Look again about validation at

http://validator.w3.org/

I am seeing:

div style:="" width:780px;="" align="center"

If you use CSS, use it and don't mess about with presentational stuff
like "width=...". Get all your inline styles out of your html if you can
and rely on your CSS sheet.

Don't use stuff like this if you can help it, use margins:

div class="shimMinHeight">&nbsp;</div

--
dorayme

I appreciate the help - all is well but...
If you have the time can you tell me why I need to use overflow: hidden in
the main
container to get results that I am looking for? Is it a Kludge to work
around some flaw
that I should be aware of, or is my coding missing the mark?

No, it is a technique based on the CSS 2.1 specification to make
containers grow in height to fit the floats in.

A side-effect of overflow: hidden is that it makes the box a "block
formatting context". Block formatting contexts grow if necessary to
contain all floats that originate inside them (and they also keep floats
from other BFCs out). A BFC is a sort of "neighbourhood" for floats.

You could still argue it's a kludge-- but it is based on specifications
and not on obscure knowledge of browser quirks.

IE grows boxes to fit floats anyway, under certain circumstances, even
when it shouldn't. So there are various kludges for IE.

dorayme has a page about it: http://netweaver.com.au/floatHouse

In article <slrnglrtbe.33j.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

A BFC is a sort of "neighbourhood" for floats.

Nice way of putting this. Don't be alarmed if you see me use it one day.
Use this post to to sue me successfully if I fail to attribute it. Never
been sued, I think it would be interesting. <g>

--
dorayme

dorayme wrote:

In article <slrnglrtbe.33j.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

A BFC is a sort of "neighbourhood" for floats.

Nice way of putting this. Don't be alarmed if you see me use it one day.
Use this post to to sue me successfully if I fail to attribute it. Never
been sued, I think it would be interesting. <g

Oh, it's terribly interesting, it just isn't fun!

Jeff

"Jeff" <dont_bug_me (AT) all (DOT) uk> wrote

dorayme wrote:
In article <slrnglrtbe.33j.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

A BFC is a sort of "neighbourhood" for floats.

Nice way of putting this. Don't be alarmed if you see me use it one day.
Use this post to to sue me successfully if I fail to attribute it. Never
been sued, I think it would be interesting. <g

Oh, it's terribly interesting, it just isn't fun!

Jeff

I appreciate the insights

Your time and energy appreciated
Kevin

On 2009-01-02, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrnglrtbe.33j.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

A BFC is a sort of "neighbourhood" for floats.

Nice way of putting this. Don't be alarmed if you see me use it one day.
Use this post to to sue me successfully if I fail to attribute it. Never
been sued, I think it would be interesting. <g

See you in court then

Here is an example showing what happens when a float (the green one)
ignores all the rules encouraging it to remain in its BFC and crosses
the BFC's border (black). The pale blue float, although it has clear:
left, does not clear the green float (it's from a different BFC, and not
recognized), and the text in it does not flow around it.

http://www.tidraso.co.uk/misc/bfc.html

Firefox/Konqueror/Opera render it correctly. I don't know when you would
ever want to do this in a real page, but it demonstrates the
consequences of the rules.

In article <slrngm106c.32a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-01-02, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrnglrtbe.33j.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

A BFC is a sort of "neighbourhood" for floats.

Nice way of putting this. ...

Here is an example showing what happens when a float (the green one)
ignores all the rules encouraging it to remain in its BFC and crosses
the BFC's border (black).

The height on #one (or perhaps easier to remember for this exercise,
#pink) certainly helps discourage it! What can poor #green do other than
to hang out and be true to its own 300px height)

The pale blue float, although it has clear:
left, does not clear the green float (it's from a different BFC, and not
recognized), and the text in it does not flow around it.

http://www.tidraso.co.uk/misc/bfc.html

Yes, #three (or #lavender) always clears #pink. You are showing, I take
it, that it does not clear #green in some circumstances.

Firefox/Konqueror/Opera render it correctly. I don't know when you would
ever want to do this in a real page, but it demonstrates the
consequences of the rules.

--
dorayme

On 2009-01-05, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrngm106c.32a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-01-02, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrnglrtbe.33j.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

A BFC is a sort of "neighbourhood" for floats.

Nice way of putting this. ...

Here is an example showing what happens when a float (the green one)
ignores all the rules encouraging it to remain in its BFC and crosses
the BFC's border (black).

The height on #one (or perhaps easier to remember for this exercise,
#pink) certainly helps discourage it! What can poor #green do other than
to hang out and be true to its own 300px height)

The pale blue float, although it has clear:
left, does not clear the green float (it's from a different BFC, and not
recognized), and the text in it does not flow around it.

http://www.tidraso.co.uk/misc/bfc.html


Yes, #three (or #lavender) always clears #pink. You are showing, I take
it, that it does not clear #green in some circumstances.

Yes. #lavender belongs to the same BFC (the root BFC) as #pink. So it
clears the float in the normal way.

But #green belongs to the BFC started by #pink. So as far as #lavender
is concerned, it isn't there at all-- the rules in the spec always say
"blah blah ... other floats in the same block formatting context".
#lavender doesn't clear #green, and the text in #lavender doesn't flow
around #green either.

Floats getting ignored is not usually the sort of thing you want, which
is why the rules encourage floats not to leak out of or into BFCs.
That's why overflow: hidden boxes grow in height to fit the floats in.