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>&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> <!--left-->

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

</div> <!--center-->

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

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

</div> <!--frame-->

</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 :)