where is the problem in FF or in IE [Archive]

lohumihem

05-25-2007, 02:47 PM

Hi, im just mad,and my head is blowing out .

plesae chk why this is going ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="aa.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrap">
<div id="height">hgh </div>
<div id="main">jhhjhj</div>
</div>
</body>
</html>

/* CSS Document */

body{margin:0px;
padding:0px;
height:100%;
}
html,body ,#wrap{
height:100%;
}
#wrap{
margin:0 auto;
background-color:#999999;
width:768px;
height:100%;
border:1px solid #000;
}
#height{
min-height:100%;
height: auto !important;
height:100%;
background-color:#0099FF;
width:150px;

}
#main{
margin-left:160px;
float:right;
background-color:#339900;
width:618px;
padding-top:0px;
}

some more interesting problem is also there.................

like if i change the order of div like..........

<div id="wrap">
<div id="height">hgh </div>
<div id="main">jhhjhj</div>
</div>

to

<div id="wrap">
<div id="main">jhhjhj</div>
<div id="height">hgh </div>

</div>

it works fine in FF, but noe IE doesnt?

why................... please help me!

holyhttp

05-25-2007, 03:59 PM

First of all height is a reserved word in both css, html na javascript. So do not use that as an ID or your will be looking for trouble ahead.
If the two columns "main" and "height" have to be side by side then you should define their css display:inline;

The width of:
#wrapper is width:768px;
#height is width:150px;
#main is width:618px;
add a margin-left:160px; to #main and you can see that the total with need for the wrapper is 928px (768px+160px)

The problem is the two cannot fit the same row therefore the second box has to move below the first one.