Continuing CSS learning Divs not staying put in Mozilla

Hi All,

Background image is in place and a Div (yellow border) inside center Div
column is positioned where I want it to be. Now the problem is that in
Mozilla my third column div is dropping down below the wrapper but is
exactly where it is supposed to be in IE. I've tried some clears and
stuff like that but to no avail. What is causing this and how do I fix it?

http://ocg6.marine.usf.edu/patrick/test_css/test.html

Thanks and Happy Friday,

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

Patrick wrote:

Background image is in place and a Div (yellow border) inside center Div
column is positioned where I want it to be. Now the problem is that in
Mozilla my third column div is dropping down below the wrapper but is
exactly where it is supposed to be in IE. I've tried some clears and
stuff like that but to no avail. What is causing this and how do I fix it?

http://ocg6.marine.usf.edu/patrick/test_css/test.html

Cause 1: 10% + 65% + 25% + (3 * 2 * 1px) = 100% + 6px = is too wide.
Cause 2: clear:left on #contentright clears the other two floats.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Squeeze - Third Rail

Els wrote:

Patrick wrote:


Background image is in place and a Div (yellow border) inside center Div
column is positioned where I want it to be. Now the problem is that in
Mozilla my third column div is dropping down below the wrapper but is
exactly where it is supposed to be in IE. I've tried some clears and
stuff like that but to no avail. What is causing this and how do I fix it?

http://ocg6.marine.usf.edu/patrick/test_css/test.html


Cause 1: 10% + 65% + 25% + (3 * 2 * 1px) = 100% + 6px = is too wide.
Cause 2: clear:left on #contentright clears the other two floats.

You're good, very good. Wow! So is it the Browser that is being
persnickety or is it saying, "Hey dumbass get it right or don't do it at
all." Makes perfect sense to me now. I was trying to stuff more into it
than it could hold. I guess it would be better to use background colors
to see exactly where the divs are lining up.

Thanks Els!

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

Patrick wrote:

[...] I guess it would be better to use background colors
to see exactly where the divs are lining up.

Or install WebDeveloper into Firefox.

<http://chrispederick.com/work/webdeveloper/>. One of its many features
allows you to outline various elements on demand.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Patrick wrote:

Els wrote:

Patrick wrote:

Now the problem is
that in Mozilla my third column div is dropping down below the
wrapper but is exactly where it is supposed to be in IE.

http://ocg6.marine.usf.edu/patrick/test_css/test.html

Cause 1: 10% + 65% + 25% + (3 * 2 * 1px) = 100% + 6px = is too wide.
Cause 2: clear:left on #contentright clears the other two floats.



You're good, very good. Wow! So is it the Browser that is being
persnickety or is it saying, "Hey dumbass get it right or don't do it at
all." Makes perfect sense to me now. I was trying to stuff more into it
than it could hold. I guess it would be better to use background colors
to see exactly where the divs are lining up.

Thanks Els!

Patrick

Patrick,

You also need to know that Mozilla (and similarly conforming browsers)
won't actually "contain" child divs the way you expect it to based on
IE's behavior. View your page in Firefox, and dial up the text size. As
the texts to the left increase, the "menu1" div will drop, to stay below
the texts. As menu1's top drops, so does its bottom, and it will appear
to "fall out" of your "contentcenter" div. #contentcenter is still the
*parent* of menu1, but Firefox won't display it as *containing" menu1.
IE behaves differently, but apparently not as specified. Surprise.

It's probably already _clear_ to you how to fix that...

What you might also fix, BTW, is the extraneous </form> sitting in your
source.

--
HTH
John

John Hosking wrote:

Patrick wrote:

Els wrote:

Patrick wrote:

Now the problem is that in Mozilla my third column div is dropping
down below the wrapper but is exactly where it is supposed to be in IE.

http://ocg6.marine.usf.edu/patrick/test_css/test.html


Cause 1: 10% + 65% + 25% + (3 * 2 * 1px) = 100% + 6px = is too wide.
Cause 2: clear:left on #contentright clears the other two floats.




You're good, very good. Wow! So is it the Browser that is being
persnickety or is it saying, "Hey dumbass get it right or don't do it
at all." Makes perfect sense to me now. I was trying to stuff more
into it than it could hold. I guess it would be better to use
background colors to see exactly where the divs are lining up.

Thanks Els!

Patrick


Patrick,

You also need to know that Mozilla (and similarly conforming browsers)
won't actually "contain" child divs the way you expect it to based on
IE's behavior. View your page in Firefox, and dial up the text size. As
the texts to the left increase, the "menu1" div will drop, to stay below
the texts. As menu1's top drops, so does its bottom, and it will appear
to "fall out" of your "contentcenter" div. #contentcenter is still the
*parent* of menu1, but Firefox won't display it as *containing" menu1.
IE behaves differently, but apparently not as specified. Surprise.

It's probably already _clear_ to you how to fix that...

What you might also fix, BTW, is the extraneous </form> sitting in your
source.

Thanks for that info. Yep, I was messing around with something else and
the test page was conveniently open so I used it. Forgot to get rid of
the closing </form> tag.

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld