ie seems to be clearing divs without my consent

floats for left nav / right content render fine in ff, but not in ie

[myrick]

so i had to launch the new design of the website i work on before i had intended [i work in municipal government, so they just don't understand], and now i'm faced with a strange selection of cross-browser quirks that i'm sweating entirely too much. here's the one at hand:

ie keeps taking one of my divs and starting it below a floated div to its left. firefox doesn't do this, and frankly, those are the only two browsers on this machine :) the rogue div ends up positioned, sized and aligned correctly except for that it's entirely too far down the page [as it's beginning below the nav column].

everything's done as includes in php, so the layout is really just a set of eight or so divs that hold everything where it should be. the issue seems to be between the nav column, floated on the left side, and the "main" div, which holds the content ... obviously on the right. you'll notice i'm not floating the content, i'm just telling it how much space to take up. here's the css for those two divs, cos that's all i can think to give you for now. if you want more, i'll hand it over. thanks so much for your anticipated suggestions!

#navcol {
float: left;
height: auto;
width: 130px;
margin-top: 20px;
padding: 0px;
}

#main {
height: auto;
width: 600px;
margin-left: 150px;
padding-top: 11px;
}

i tried a bunch of things like hiding overflow for navcol, floating main to the right etc ... i even did my homework and read through some posts on this [and other] forums before posting, but i feel i'm at a bit of an impasse. sorry for the long post!

[Setek]

I’m not getting the same problem—is there any more to it? Is

#navcol

surrounded by another division that

#main

is not?

Because if it is, it is most likely because the parent container of the float, when hasLayout is triggered (e.g. explicitly setting a width, or height) it will acknowledge the dimensions of its child element and size accordingly (and, for a kick in IE’s guts, incorrectly. It isn’t meant to do that.)

Which would mean a block-level element that isn’t floated will be taking up all the width next to the floated element, and the non-floated

#main

will have to sit down below the

#navcol

(and its parent.)

Can you post some sample HTML that replicates the problem with the CSS you posted?

[SuzyUK]

Hi myrick and Welcome to WebmasterWorld!

guessing.. have you got these two divs wrapped in a container div set at 750px wide? and is this only IE5.x/6, and what's your Doctype if any

my guess would be that you've fallen foul of the 3px jog and IE's quirky float model. One suggestion would be to use a wrapper div, and float the #main div too

e.g.

CSS:
#wrap {
width: 750px; /* IE will contain floats with this */
overflow: auto; /* compliant browsers will contain floats with this */
background: #eee;
}

#navcol {
float: left;
width: 130px;
background: #dad;
color: #fff;
}

#main {
width: 600px;
float: right;
/* no margin should be required if floated right instead */
background: #008;
color: #fff;
}

p {
margin: 0.5em 0; /* IE needs explicit margins inside floated elements */
}

HTML:
<div id="wrap">
<div id="navcol"><p>navigation column<br>nav<br>nav</p></div>
<div id="main"><p>main content column</p></div>
</div>

is that close? if not, and there is more to the layout, please post your outline layout HTML and tell us yur Doctype

thanks

[myrick]

these next couple posts may be kind of train-of-thought, so bear with me please. i'll try to make everyone aware of things i'm noticing as i notice them, rather than forget / omit anything.

one thing i'm seeing is that the

margin

tag on

#main

seems to be controlling the positioning of the entire wrapping div in ie, which i have as

#box

. that's rather strange to me. in response to setek, perhaps i'm not fully understanding the

hasLayout

schema, if that's a word i can use for it. i read an msdn article about it ... maybe i'm just slow ;)

as far as your suggestions, suzyuk, the code you posted rendered beautifully by itself, but when i integrated it into my stylesheets, they killed it. i had the same problem i had originally in ie, not to mention that the whole page moved to the left. in ff,

#main

jumped down below

#navcol

and justified itself left, so lord knows what i've done :)

i think what i'll do is just post the entire contents of the two stylesheets [one for layout, one for styling] and the html for the index page, if that's not too much.

oh, as far as doctype, there's actually no doctype specified in the header of the php files [the whole page], but the doctype specified in the html files that are included in

#main

are xhtml 1.0 trans, if that helps at all.

thanks to both of you so so much for your help. i'll keep banging away at it over here and i'll let you know if i get anywhere.

i'll post the code shortly!

[myrick]

/* CSS Document */

#viewport {
height: auto;
width: auto;
overflow: auto;
}

#box {
height: auto;
width: 760px;
overflow: none;
}

#header {
width: 100%;
height: 120px;
margin: 0px;
padding: 0px;
}

/* this one's only for one page, so don't worry too much about it */
#mmheader {
margin: 0px;
padding: 0px;
height: 100px;
width: 100%;
clear: none;
}

#staticnav {
width: 100%;
height: 34px;
padding: 2px;
}

#navcol {
float: left;
height: auto;
width: 130px;
margin-top: 20px;
padding: 0px;
overflow: hidden;
}

#subnav {
float: left;
height: auto;
width: 130px;
margin: 0px;
margin-top: 30px;
padding: 0px;
}

/* this div is hidden and pops out thanks to a bit of java. i hope it's not what's breaking things */
#updates {
display: block;
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
border: solid 1px #000;
}

#main {
height: auto;
width: 600px;
margin: 150px;
padding-top: 11px;
}

#footer {
clear: both;
height: auto;
width: 100%;
}

[Milamber]

any html to go with the css?
also, have you got a DOM tool? If not I'd highly recommend installing the IE Dev Toolbar, makes troubleshooting problems like this so much easier.

[myrick]

<html>
<head>
<title>title</title>
<link rel="stylesheet" href="css/layout760.css" type="text/css">
<link rel="stylesheet" href="css/04style.css" type="text/css">
</head>

<body>
<div align="center" id="viewport">
<div align="left" id="box">
<div id="header">
<?php include('include/header760.php');?>
</div>

<div id="staticnav">
<?php include('include/static.html');?>
</div>

<div id="recupd">
<?php include('include/updates.php');?>
</div>

<div id="navcol">
<?php include('include/rootnav.php');?>
</div>

<div id="main">
<?php include('include/main.html');?>
</div>

<div id="footer">
<?php include('include/footer.php');?>
</div>
</div>
</div>
</body>
</html>

[myrick]

thanks for your interest, milamber! there's the html for the php page ... i can post the html that goes into the includes also, if you'd like. i'm wary of taking up too much space :/

regarding the dom tool, i have the dev toolbars installed for both ie and ff. maybe i'm not using them to the full extent of their capabilities, but they've not shown any light on the situation for me as of yet.

oh, also, the css i posted up there is the layout css. i can post the style css as well, i'm just not sure what to edit out and what to keep, and it's rather long. i'll keep tinkering. thanks so much again!

[myrick]

aha! okay, here's a lead. this test case seems to work in both ff2 & ie6 ... not sure about others. i'll check ie7 in a minute. check it out and let me know what you find.

CSS
#viewport {
height: auto;
width: auto;
overflow: auto;
}

#box {
width: 760px; /* IE will contain floats with this */
overflow: auto; /* compliant browsers will contain floats with this */
background: #eee;
overflow: none;
}

#header {
width: 100%;
height: 120px;
margin: 0px;
padding: 0px;
}

#staticnav {
width: 100%;
height: 34px;
padding: 2px;
}

#navcol {
float: left;
width: 130px;
background: #dad;
color: #fff;
}

#updates {
display: block;
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
border: solid 1px #000;
}

#main {
height: auto;
width: 600px;
float: right;
/* no margin should be required if floated right instead */
background: #008;
color: #fff;
padding-top: 11px;
}

#footer {
clear: both;
height: auto;
width: 100%;
}

p {
margin: 0.5em 0; /* IE needs explicit margins inside floated elements */
}

HTML
<div align="center" id="viewport">
<div align="left" id="box">
<div id="header">
<p>hi! i'm the header!</p>
</div>

<div id="staticnav">
<p>and i'm the static nav!</p>
</div>

<div id="recupd">
<p>in real life, you wouldn't really be able to see me ...</p>
</div>

<div id="navcol">
<p>nav<br>nav<br>nav<br>nav</p>
</div>

<div id="main">
<p>connnnnnnnnnnnnntent.</p>
</div>

<div id="footer">
<p>and the footer.</p>
</div>
</div>
</div>

thanks to suzyuk for the code off of which i built this example :)

[Milamber]

test looks fine in IE7 to me, Opera and FF have horizontal scroll bars for #box

[edited by: Milamber at 4:39 pm (utc) on June 18, 2007]

[myrick]

yeah, i'm seeing this. i'm not entirely sure what's goin on there. i'm going to start adding items from my "style" stylesheet one by one, and we'll see if that fixes the scrollbar / breaks the page.

thanks for your help!

[SuzyUK]

>>we'll see if that fixes the scrollbar

#box {
width: 760px; /* IE will contain floats with this */
overflow: auto; /* compliant browsers will contain floats with this */
background: #eee;
overflow: none;
}

change to:
#box {
width: 760px; /* IE will contain floats with this */
overflow: hidden; /* compliant browsers will contain floats with this */
background: #eee;
}

that should fix the scrollbar, and apart from that I would remove

align = "center"

and

align="left"

from the HTML as unnecessary / deprecated attributes

<div align="center" id="viewport">
<div align="left" id="box">

change to:

<div id="viewport">
<div id="box"> 

and then you can correct the centering via CSS like so..

body {
text-align: center;
}
#box {
width: 760px; /* IE will contain floats with this */
margin: 0 auto;
overflow: hidden; /* compliant browsers will contain floats with this */
background: #eee;
text-align: left;
}

#viewport

is redundant in your code as it stands (you can remove all the rules from it as they are defaults anyway..) but you might want to leave it [the div] there for an extra styling hook in the future..

Suzy

[myrick]

thank you all very very much [especially you, suzy, for that last very helpful post!]. i've fixed the problem, so we can call it a day. it turned out that a lot of the fixes you all suggested were being stomped on by errant pieces of code in the other stylesheet, which i guess i needed to clean out. if i could turn red in embarrassment online, i would :) so yeah, thank you for showing me what to do and allowing me to see what i did ... confucious say.

if you'd like me to post the final version of the css / html, i'd be more than happy to, just as a learning guide. it is rather lengthy, however, even when edited, so be warned. i'll leave that up to our helpful moderator[s] :)

thanks again! you've saved my job ;) haha