Main content shows below floated content

instead of side by side - IE bug?

[stavs]

We are experiencing a box model problem whereby floated content is displacing the main content so that it shows below the floated content instead of side-by-side.

This doesn't happen all the time - and often when it does happen, refreshing the page cures it. But mostly the problem occurs if the page is not already in the cache - i.e. affecting mostly new customers (not ideal).

Has anyone else come across this in IE? There must be a solution - but I'm dammed if i can find it.

This is how the page should look with the boxouts and the main content side by side;

##############################
#--box-outs--#-------main content------#
#--box-outs--#-------main content------#
#--box-outs--#-------main content------#
#--box-outs--#-------main content------#
##############################

But this is how it looks when it doesn't display properly;

###########
#--box-outs--#
#--box-outs--#
#--box-outs--#
##############################
--------------#------main content-------#
--------------#------main content-------#
--------------#------main content-------#
--------------#------main content-------#
--------------####################

Hugely frustrating! Any ideas would be gratefully received.

[SuzyUK]

stavs..

have you got any clearing divs/elements within the main content div?

try adding * {zoom: 1.0;} to your CSS file - does that make things better or worse.

(note: this is a catchall IE bug test only and is not necessarily a recommended solution because if it does help it will only work for IE5.5 upwards)

If it's not that.. page refresh correction suggests something else..
how about floated images in the maincontent that don't have a width specified? have you any?
or indeed any floats that don't have their widths specified (especially if they contain images)

More questions than answers ;)

Suzy

[HitsChatter]

I can think of a couple things:

1. Post your CSS, that will help others see any problematic code.

2. Quite often (especially with IE) something like this indicates a browsers incorrect interpretation of width. Most of the time, if you set total width, and padding for the same element, and fit things exactly to the pixel, IE will mess it up. Again, seeing your CSS will help.

[stavs]

Here is the boxout css;

/* BOXOUT and POPUPS */
.boxOut{border:none;padding:8px;}
.boxOut div{margin:0px;border:none;padding:1px;}
.boxOut p,.boxOut ol,.boxOut ul{
width:100%;margin:0px;border:none;padding:2px 5px 3px 5px;
}
.boxOut table{width:100%;}
.boxOut li,.boxOut table td
{
list-style-position:inside;
border:none;
margin:0px;padding:2px;
}
.boxOut .header{background-color:#eee;border-left:solid 10px #ddd}
.boxOut .header p{font-weight:bolder;color:#000;}
.boxOut .body{}
.boxOut .footer{}
.boxOut .footer p,.boxOut .footer p a{font-weight:bolder;color:#000;}
.popup
{
background-color:#f3f3f3;

border:solid 3px #ccc;
margin:10px 10px 0px 10px;
}
.boxOut p,.boxOut li,.boxOut dt,.boxOut th,.boxOut td{color:#666;font-size:11px;}
.boxout img{margin:0px;padding:0px;}

and here is the main content css;

#listing table{
width: 100%;
padding: 0px 0px 0px 0px;
border: none;
margin: 0px 0px 0px 0px;
margin-right: -3px;
position: static;}
#listing td,#listing th{font-size:12px;}
#listing thead th{font-size:11px;}
#listing thead th a{color:#900;}
#listing thead th img{padding:0px;margin:4px 0px 0px 0px;}
#listing tbody th{text-align:left;}
#listing em
{
color:#c00;
font-style:normal;font-weight:600;
}
#listing td.descr
{
background-color:#eee;
text-align:left;vertical-align:top;
padding-bottom:10px;border-top:solid 2px #ccc;padding-top:10px;
}

still can't see it...

[HitsChatter]

hmmmm....maybe if you post the html as well, I or someone else could play around w/ it for you. (i'm not used to dealing w/ css that involves tables. I usually use CSS to avoid the use of tables)

[vkaryl]

Recommend making your pages work in Firefox/Opera first, THEN tweak to make IE behave....

IE is 99.9% of the time WRONG.

[createErrorMsg]

I hate to tell you this, but there is nothing in the CSS you posted that would cause the problem you describe. Nor is there anything in the CSS you posted that would cause the result you desire. All of that CSS is display stuff (fonts and colors with a few margins and such) without any positioning. I assume from this, and from some of the selectors in your CSS, that you are using tables for layout, which must mean the positioning problem lies in the HTML, not the CSS. Except that you said something was floated...?

In other words, the problem you describe is a layout problem, and so must result from an error in your layout method. If you indeed use tables, check them to be sure you haven't left out a cell or colspan or something like that. If you use CSS for positioning, we'll need to see that CSS instead.

A couple thoughts on the CSS you posted:

border:none

Although 'none' is a valid value for the border-style property, it means the same thing as a '0' setting for border-width, which is the more common practice for displaying no border on an object. Either is valid, but I find using border:0; is more helpful when it comes to calculating box widths and such. Perhaps that's just a matter of taste...

position: static;

This is the default setting for all elements until explicitly set otherwise, therefore it is unecessary to specify it in the code.

Get back to us with more code if you can! We need to see that part about floating and widths, etc.

[stavs]

sorry, forgot this bit;

#content
{
height:100%;
background-color:#fff;

margin:0px 0px 0px 0px;border:none;padding:0px 20px 0px 0px;
}
#content .page
{
font-size:12px;
position:relative;

width:100%;
padding:0px 0px 0px 0px;border:none;margin:0px 0px 0px 0px;
}
#content .page h1{color:#000;display:inline;font-size:18px;padding-left:7px;}
#content .page .header{padding:5px 0px 5px 0px;}
#main div.boxoutMarginRight{margin-right:25%;border-right:solid 1px #ccc;padding-right:0px;}
#main div.boxoutMarginLeft{margin-left:240px;border-left:solid 1px #ccc;}

/* minimum heights widths for content */
#main,#header,#footer{
min-width:795px;
width:expression(document.body.clientWidth < 800? "775px" : "100%" );
}
#content.boxoutMarginRight .page{min-height:2100px;}/*IE Only*/* html body #content.boxoutMarginRight .page{height:2100px;}
#content.boxoutMarginLeft .page{min-height:1700px;}/*IE Only*/* html body #content.boxoutMarginLeft .page{height:1700px;}

[createErrorMsg]

I still don't see any positioning information in that post. There's one element with a position: relative;, but then it has no offset and doesn't appear to contain any absolutely positioned elements so the pos: rel really isn't doing anything.

There's still something you're not showing us...

width:expression(document.body.clientWidth < 800? "775px" : "100%" );

This is IE proprietary code. If the problem you're having is in IE, I'd double check to be sure you've used this correctly. I'm unfamiliar with this stuff, so I can't help you with it, but maybe somebody else here can.

[stavs]

does this help;

#right,#left{min-height:800px;}/*IE Only*/* html body #right,* html body #left{height:800px;}
#left
{
width:236px;float:left;display:inline;
padding:0px;border:none;margin:0px;
}
#right
{
width:25%;float:right;display:inline;
padding:0px;border:none;margin:0px;
}

(sorry, i should have included this in the original post).

[createErrorMsg]

And these #left and #right elements are what? <div>s? Where are they in the layout (your original post has box-outs and main contents). I'm not sure why you have these two elements displaying inline, but then, I'm not sure about much of anything here.

I suggest you go back to the beginning and see if you can give us a simplified version of your html code (the div structure, mainly) and all the relevant css. Without being able to get a real sense of your whole page, these little snippet 'islands' don't tell us anything.

[stavs]

in terms of page we are having problems with, #left is a div ID for the left boxouts.

(#right div id is not usd on this particular page)