So far i had compared with IE6 and Google Chrome, it seems that IE6 perform what i wanted it to be as the pagesize in css is black where wrapping all the others div to the end while Google Chrome just behave weirdy ...
Following is the codes :
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="pagesize">
<div class="logo"> <img src="mitosc_logo.jpg" width="410" height="150" /></div>
<div class="mainsponsor"> Main Sponsor </div>
<div class="sidemenu"> Side Menu</div>
<div class="speaker"> Speaker </div>
<div class="vmenu"> Vertical Menu </div>
<div class="news"> News </div>
<div class="gadget"> Gadgets </div>
<div class="sponsors"> </div>
</div>
</body>
</html>
CSS:
Code:
body {
background-image:url('gradient.jpg');
background-repeat:repeat-x;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.pagesize{
width: 80%;
background-color:black;
margin-left: auto;
margin-right: auto;
padding: 10px;
margin-top: auto;
margin-bottom: auto;
}
.logo{
float: left;
width:40%;
height: 150px;
background-color: green;
}
.mainsponsor{
float: left;
width:58%;
height: 150px;
background-color: red;
}
.sidemenu{
float: left;
width:18%;
height: 400px;
background-color: yellow;
}
.speaker{
float: left;
width: 82%;
height: 150px;
background-color: blue;
}
.vmenu{
float: left;
width: 82%;
height: 100px;
background-color: purple;
}
.news{
float: left;
width: 60%;
height: 800px;
background-color: teal;
}
.gadget{
float: left;
width: 22%;
height: 300px;
background-color: blue;
}
.sponsors{
float: left;
width: 90%;
height: 200px;
background-color: blue;
}
|
