div float left / works on firefox, not ie - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

div float left / works on firefox, not ie

on IE two layers slide under other two divs

milliina

1:22 pm on Jun 9, 2010 (gmt 0)

10+ Year Member

Hi, I'm new here as well as am I quite new with CSS. I've got quite far with a page I'm trying to construct and it works just as I want it to on Firefox but not on IE... some of the divs go wrong.

The correct way would be this:

 ___ _ _______
| l |l|_head__|
| e |i|
| f |n| content
| t |e|
|___|_|________
|____footer____|

instead it goes like this on IE:

 ___ _ 
| l |l|
| e |i|
| f |n|
| t |e|
|___|_|____
|_head_____|

 content
 ______________
|____footer____|

Do you have some solution to fix this reasonably easy (read: so that I also understand what's going on)? :)

Here's the CSS code:

#frame {
 width: 1000px;
 margin-top: 20px;
 margin-left: 20px;
}

#center {
 width: 1000px;
}

#left{
 width: 200px;
 float: left;
}

#head{
 width:566px;
 float:left;
}

#content{
 width:566px;
 float:left;
 margin-left: 70px;
 margin-top: 30px;
}

#line{
width: 33px;
float:left;
}

#footer{
 width: 999px;
 height: 150px;
 clear: both;
}

And here's the HTML code:

<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="name.css" />
</head>

<body bgcolor="#757859" text="#b7b1b1" link="#b7b1b1" vlink="#b7b1b1" alink="#b7b1b1">

<div id="background" style="position:absolute; left:0px; top:0px; width:557px; height:364px; z-index:-1"><img src="background.jpg" width="988" height="729"></div>
<div id="frame">
 
 <div id="center">
 
<div id="left">
<img src="picture01.png" width="200" height="311">

 <p>&nbsp;</p>
 <p><img src="picture02.png" width="200" height="138"></p>

 <p>&nbsp;</p>
 <p><img src="picture03.png" width="200" height="138"></p>

 <p align="center">&nbsp;</p>
 <p align="center"><img src="logo01.png" width="83" height="32"> 
 <img src="logo02.png" width="75" height="56"></p>
<p align="center"><img src="logo03.png" width="87" height="31"> 
<img src="logo04.png" width="100" height="38"></p>
</div>


 <div id="line"> <img src="line.png" width="33" height="773"> </div>

</div>

 <div id="head">
<img src="header.png" width="587" height="199">

<div id="content">
Text here.
 </div>


</div>
 
 </div>
 
<div id="footer"> 
Text here.
</div>
 
</div>
</body>
</html>

Thank you very much! :)

alt131

1:06 pm on Jun 10, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi milliina and welcome to WebmasterWorld ;)

Your first "diagram" indicates you want div#left and div#line to float left of div#head. As div#left and div#line are inside div#center, you need to set div#center to float:left (not the inner divs).

Also, check widths:

div#head has width:566px, but contains an image of width:587px - wider than the div itself. That requires the browser to decide whether to expand the div to the width of the image or not - and browsers deal with this differently. The fix is to set your divs so they are at least as wide as any content that has a specified width, or give no width at all (which defaults to auto, so will "expand").

A second width issue is for eg, div#center with width:1000px. That is meant to float beside div#head which is width:566px - a total of 1566px (or maybe 1587px if the div expands to contain the image). However, if the user viewport or a parent element is less than the total width required to float div#head beside div#center, the browser will "drop" div#head and draw it below - as in your second diagram This is correct behaviour for floats. If you want to specify widths in px (rather than, say %) the fix is to make sure the overall total width of all elements will fit - or don't use floats.

The following code resolves the issue you asked about. The widths will need to be adjusted to your needs. It is very rough code, plus I wonder if some images are really background images - but it is a start. Displays as designed in ie6&7,&8 op9.6&10, winsaf3&5, ff3.5

<html>
<head>
<title>Title</title>
<style type="text/css">

body, a, a:visited {
color: #b7b1b1;
}

#background {
position:absolute;
left:0px;
top:0px;
/*width:557px;*/
height:364px;
z-index:-1;
}

#frame {
/*width: 1000px;*/
margin-top: 20px;
margin-left: 20px;
}

#center {
/*width: 1000px;*/
float:left;
}

#left{
width: 200px;
float: left;
}

#head {
/*width:566px;*/
width:600px;
/*float:left;*/
margin-left:233px;
}

#content{
width:530px;
/*float:left;*/
margin-left: 70px;
margin-top: 30px;
}

#line {
width: 33px;
/*float:left;*/
margin-left:200px;
}

#footer{
width: 999px;
height: 150px;
clear: both;
}

</style>
</head>
<body>

<div id="background"><img src="background.jpg" width="988" height="729"></div>

<div id="frame">

<div id="center">

<div id="left">
<img src="picture01.png" width="200" height="311">
<p> </p>
<p><img src="picture02.png" width="200" height="138"></p>
<p> </p>
<p><img src="picture03.png" width="200" height="138"></p>
<p align="center"> </p>
<p align="center"><img src="logo01.png" width="83" height="32">
<img src="logo02.png" width="75" height="56"></p>
<p align="center"><img src="logo03.png" width="87" height="31">
<img src="logo04.png" width="100" height="38"></p>
</div> 

<div id="line"> Line <img src="line.png" width="33" height="773"> </div>

</div> 

<div id="head"> Head <img src="header.png" width="587" height="199"> <div id="content"> Text here.</div>
</div> 

<div id="footer"> Text here. </div>

</div> 

</body>
</html>

[edited by: alt131 at 1:10 pm (utc) on Jun 10, 2010]

Shado

1:07 pm on Jun 10, 2010 (gmt 0)

10+ Year Member

Have you tried floating your #content to the right

milliina

9:24 am on Jun 14, 2010 (gmt 0)

10+ Year Member

alt131, I got the page to work exactly the way I wanted it with your code! Thank you so very much! You can't imagine how long I was trying to figure this out :)