height in floats

First, the code:

<div id="menu" style="float: left; background: red; width: 50px;
height: 500px"></div>
<div id="main">
<div id="header" style="background: green; color: white">
<div id="title" style="float: left; padding-left:
200px">hello,<br />hello,</div>
<div id="search" style="float: left; padding-left: 200px">world!
<br />world!</div>
<div id="end">&nbsp;</div>
</div>
<div id="body" style="background: blue">&nbsp;</div>
</div>

Here's how it renders:

http://www.frostjedi.com/terra/scrip...at-height.html

The problem is that the text that I'd like to appear in the green dive
appears, instead, in the blue div. ie. the height of "header" is
being decided by "end" exclusively and since "end" isn't the same
height as "title" or "search", the background of "header" isn't taking
up as much space as it should.

This is, as I understand it, how floats are supposed to work, but I'd
still like both hello, worlds! to have a green background and not a
blue one. Is there a way I can achieve the same effect (eg. hello
being padding 200px on the left and world! another 200px more on the
left?

On Nov 9, 1:07 am, yawnmoth <terra1... (AT) yahoo (DOT) com> wrote:

First, the code:

div id="menu" style="float: left; background: red; width: 50px;
height: 500px"></div
div id="main"
div id="header" style="background: green; color: white"
div id="title" style="float: left; padding-left:
200px">hello,<br />hello,</div
div id="search" style="float: left; padding-left: 200px">world!
br />world!</div
div id="end"> </div
/div
div id="body" style="background: blue"> </div
/div

Here's how it renders:

http://www.frostjedi.com/terra/scrip...at-height.html

The problem is that the text that I'd like to appear in the green dive
appears, instead, in the blue div. ie. the height of "header" is
being decided by "end" exclusively and since "end" isn't the same
height as "title" or "search", the background of "header" isn't taking
up as much space as it should.

This is, as I understand it, how floats are supposed to work, but I'd
still like both hello, worlds! to have a green background and not a
blue one. Is there a way I can achieve the same effect (eg. hello
being padding 200px on the left and world! another 200px more on the
left?

I am really confused about what you are trying to do because you are
not using CSS styles. The page is appearing like it is coded. Maybe
you need to do some research on CSS

http://www.w3.org/Style/CSS/

A CSS style will be like this:

h1{
font-size:1.5em;
line-height:125%;
text-align:center;
background-color:#009933;
border:2px solid #000000;
color:#FFFFFF;
}

The styles can be in the head (<style type="text/css">) section or on
a separate style sheet (<link rel="stylesheet" href="example.css"
type="text/css>).
They can also be located in the body of the page, but still require
(<style type="text/css>) to use.

Hope it helps,

Daniel

On 2007-11-09, yawnmoth <terra1024 (AT) yahoo (DOT) com> wrote:

First, the code:

div id="menu" style="float: left; background: red; width: 50px;
height: 500px"></div
div id="main"
div id="header" style="background: green; color: white"
div id="title" style="float: left; padding-left:
200px">hello,<br />hello,</div
div id="search" style="float: left; padding-left: 200px">world!
br />world!</div
div id="end">&nbsp;</div
/div
div id="body" style="background: blue">&nbsp;</div
/div

Here's how it renders:

http://www.frostjedi.com/terra/scrip...at-height.html

The problem is that the text that I'd like to appear in the green dive
appears, instead, in the blue div. ie. the height of "header" is
being decided by "end" exclusively and since "end" isn't the same
height as "title" or "search", the background of "header" isn't taking
up as much space as it should.

This is, as I understand it, how floats are supposed to work, but I'd
still like both hello, worlds! to have a green background and not a
blue one. Is there a way I can achieve the same effect (eg. hello
being padding 200px on the left and world! another 200px more on the
left?

#end { clear: both }. Except then it also clears the menu on the left.
So instead set overflow: hidden on #header.

It doesn't work in IE but for that there's something weird you can do
with a property called "zoom" I think.

Suddenly, without warning, a-ok-site exclaimed (11/10/2007 4:15 AM):

On Nov 9, 1:07 am, yawnmoth <terra1... (AT) yahoo (DOT) com> wrote:
First, the code:

div id="menu" style="float: left; background: red; width: 50px;
height: 500px"></div
div id="main"
div id="header" style="background: green; color: white"
div id="title" style="float: left; padding-left:
200px">hello,<br />hello,</div
div id="search" style="float: left; padding-left: 200px">world!
br />world!</div
div id="end"> </div
/div
div id="body" style="background: blue"> </div
/div


I am really confused about what you are trying to do because you are
not using CSS styles. The page is appearing like it is coded. Maybe
you need to do some research on CSS

http://www.w3.org/Style/CSS/

A CSS style will be like this:

h1{
font-size:1.5em;
line-height:125%;
text-align:center;
background-color:#009933;
border:2px solid #000000;
color:#FFFFFF;
}

The styles can be in the head (<style type="text/css">) section or on
a separate style sheet (<link rel="stylesheet" href="example.css"
type="text/css>).
They can also be located in the body of the page, but still require
(<style type="text/css>) to use.

Hope it helps,

Daniel

Huh? He's using inline styles. Apart from the coding error in your
post, if only inline is being used, then it'll work whether not there's
a <style type="text/css"> or not. Inline styles work without the type value.

I know this because when I was first learning css, inline was my only
choice due to the CMS being utilized at work. Couldn't use linked
stylesheets, and no access to <head> means you can't use embedded styles.

I would imagine this is what the OP is laboring under as well.

Actually, <style type="text/css">...styles... </style> will work in the
body (tried out of annoyance), but it's not supposed to.

jmc

Ben C wrote:

On 2007-11-09, yawnmoth <terra1024 (AT) yahoo (DOT) com> wrote:
First, the code:

div id="menu" style="float: left; background: red; width: 50px;
height: 500px"></div
div id="main"
div id="header" style="background: green; color: white"
div id="title" style="float: left; padding-left:
200px">hello,<br />hello,</div
div id="search" style="float: left; padding-left: 200px">world!
br />world!</div
div id="end">&nbsp;</div
/div
div id="body" style="background: blue">&nbsp;</div
/div

Here's how it renders:

http://www.frostjedi.com/terra/scrip...at-height.html

The problem is that the text that I'd like to appear in the green dive
appears, instead, in the blue div. ie. the height of "header" is
being decided by "end" exclusively and since "end" isn't the same
height as "title" or "search", the background of "header" isn't taking
up as much space as it should.

This is, as I understand it, how floats are supposed to work, but I'd
still like both hello, worlds! to have a green background and not a
blue one. Is there a way I can achieve the same effect (eg. hello
being padding 200px on the left and world! another 200px more on the
left?

#end { clear: both }. Except then it also clears the menu on the left.
So instead set overflow: hidden on #header.

It doesn't work in IE but for that there's something weird you can do
with a property called "zoom" I think.

It's amazing how often this problem comes up (i.e., containers
collapsing due to floats being out of the document flow). There needs to
be a standard property to do what 'overflow: hidden;' does.

The IE thing is:

#container {
zoom: 1;
}

On Nov 10, 3:51 am, "John L." <remov... (AT) edombmtech (DOT) co.uk> wrote:

Ben C wrote:
snip

It's amazing how often this problem comes up (i.e., containers
collapsing due to floats being out of the document flow). There needs to
be a standard property to do what 'overflow: hidden;' does.

The IE thing is:

#container {
zoom: 1;

}

Why does "overflow: hidden" / "zoom: 1" work? How cross browser
compliant is it? I tried doing a google search to figure it out but
wasn't able to glean much more other then the fact that it does seem
to work...

On 2007-11-10, yawnmoth <terra1024 (AT) yahoo (DOT) com> wrote:

On Nov 10, 3:51 am, "John L." <remov... (AT) edombmtech (DOT) co.uk> wrote:
Ben C wrote:
snip

It's amazing how often this problem comes up (i.e., containers
collapsing due to floats being out of the document flow). There needs to
be a standard property to do what 'overflow: hidden;' does.

The IE thing is:

#container {
zoom: 1;

}

Why does "overflow: hidden" / "zoom: 1" work? How cross browser
compliant is it?

Overflow: hidden works because it makes the box a new "block formatting
context", which basically means floats that start inside it stay inside
it and floats that start outside it stay outside it. Other special rules
for BFCs are mostly consequences of achieving those two aims in a
reasonably helpful way.

It's all defined in CSS 2.1 (see 9.4.1 and 10.6.7) and works in Firefox,
Opera, Konqueror, Safari, and in any other CSS 2.1-conforming browser.

So in a sense it works because the spec says so. But why specify it like
that? Well, they specify it for boxes with any value of overflow other
than visible. You can see why you might want floats inside a scrolling
box to be isolated from floats outside it-- so the box doesn't have to
keep reflowing around them as it scrolls. I think that's the basic
reason. Although overflow: hidden itself doesn't have that problem, it's
convenient the way they've defined it so you can make a parent envelop
its floating descendents.

"Zoom" is not a CSS property, I have no idea what it means, but it seems
to do the job in IE.

Ben C wrote:

On 2007-11-10, yawnmoth <terra1024 (AT) yahoo (DOT) com> wrote:
On Nov 10, 3:51 am, "John L." <remov... (AT) edombmtech (DOT) co.uk> wrote:
Ben C wrote:
snip

It's amazing how often this problem comes up (i.e., containers
collapsing due to floats being out of the document flow). There needs to
be a standard property to do what 'overflow: hidden;' does.

The IE thing is:

#container {
zoom: 1;

}
Why does "overflow: hidden" / "zoom: 1" work? How cross browser
compliant is it?

Overflow: hidden works because it makes the box a new "block formatting
context", which basically means floats that start inside it stay inside
it and floats that start outside it stay outside it. Other special rules
for BFCs are mostly consequences of achieving those two aims in a
reasonably helpful way.

It's all defined in CSS 2.1 (see 9.4.1 and 10.6.7) and works in Firefox,
Opera, Konqueror, Safari, and in any other CSS 2.1-conforming browser.

So in a sense it works because the spec says so. But why specify it like
that? Well, they specify it for boxes with any value of overflow other
than visible. You can see why you might want floats inside a scrolling
box to be isolated from floats outside it-- so the box doesn't have to
keep reflowing around them as it scrolls. I think that's the basic
reason. Although overflow: hidden itself doesn't have that problem, it's
convenient the way they've defined it so you can make a parent envelop
its floating descendents.

"Zoom" is not a CSS property, I have no idea what it means, but it seems
to do the job in IE.

According to this article, which somebody just posted in another thread:

http://www.quirksmode.org/css/clearing.html

You can use width: 100%; to do the same job as zoom: 1;

'The width is necessary to trigger "hasLayout" in Explorer Windows
(except for 7)'

Interesting stuff.

On Nov 10, 10:25 am, "John L." <remov... (AT) edombmtech (DOT) co.uk> wrote:

Ben C wrote:
snip

According to this article, which somebody just posted in another thread:

http://www.quirksmode.org/css/clearing.html

You can use width: 100%; to do the same job as zoom: 1;

'The width is necessary to trigger "hasLayout" in Explorer Windows
(except for 7)'

Interesting stuff.

I just tried replacing "zoom: 1" with "width: 100%" on <http://
www.frostjedi.com/terra/scripts/demo/float-height.html> and...
although they may do the same job under certain circumstances, here's
one example of where they don't do the same thing.

In article <5plkaoFrpvqsU1 (AT) mid (DOT) individual.net>,
"John L." <removeme (AT) edombmtech (DOT) co.uk> wrote:

It's amazing how often this problem comes up (i.e., containers
collapsing due to floats being out of the document flow). There needs to
be a standard property to do what 'overflow: hidden;' does.

It is better to think of it as containers not growing in the
first place rather than collapsing. If a container, say a div, is
not given a height by an author and only has floats within, then
it simply does not develop height at all in most standards
compliant browsers. It is blind to the presence of such children,
it simply does not respond to them. In IE 6, the culture is
different and floated children are seen and enveloped by the
parent.

That this problem comes up is not so surprising. If you read the
css2.1 rules on floats, even quite carefully, it is not all that
easy to predict how browsers made by the most willing follower of
those rules, will behave. But in one respect at least, in terms
of height, most modern browsers (not IE) are consistent.

--
dorayme