Layout doesn't work in Opera

I have done this layout, it works in IE7, FF2 but not in Opera 9.24 and 9.25. The text in the right side exceed beyond the big frame, but after clicking refresh, the text goes back to the proper place.

I have tried that it may work correctly:
1. if I delete the entire header
2. if I include less text rows in the content area (that is why I include so many text rows in the code below)

I have tried many versions and no one works perfectly. There are also cases which the alignment is right but the right margin is less than what I define, and which will also be correct when I click refresh. Since there is no css sheet attached to the page, I think it is not cache problem. Pls help!

(I use PC, window xp, width of screen: 1280x1024)

Thanks!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
body {
background:#FF9999;
width: 100%;
padding: 0px;
margin-top: 40px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.top_left {
float: left;
}

.top_right {
float: right;
}

.extrapad {
float: left;
padding-right: 50px;
padding-left: 50px;
padding-top: 0px;
padding-bottom: 0px;
}

.width100 {
width: 100%;
float: left;
}

.backgd-header{
background-image: url(top_rp.jpg);
background-repeat: repeat;
width: 100%;
float: left;
margin: 0px;
padding: 0px;
}

.central_container-out {
float: left;
clear: both;
position: relative;
width: 100%;
}

.central_container-in{
background-color:#FF66CC;
float:left;
clear: both;
margin-left:150px;
margin-right:200px;
display:inline;
}

.backg-right {
background-color: #00CCCC;
}

.backg-left {
clear: none;
float: left;
}

.header {
width: 100%;
float: left;
clear: both;
}

.sidebar_left {
float:left;
width:150px;
margin-left:-150px;
position:relative;
clear: none;
background-color: #CC3300;
}

.sidebar_right{
float:right;
width:200px;
margin-right:-200px;
position:relative;
background-color: #FFCC00;
clear: none;
}

.maincontent {
float:left;
clear: none;
width:100%;
margin-right:0px;
position:relative;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="width100">
<div class="header">
<div class="backgd-header">
<img src="top_1.jpg" width="555" height="116" class="top_left">
<img src="top_2.jpg" width="222" height="116" class="top_right">
</div>
</div>
</div>
<div class="extrapad">
<div class="width100">
<div class="central_container-out backg-right">
<div class="backg-left">
<div class="central_container-in">
<div class="sidebar_left">
<p>left data left data left data left data left data left data left data left data </p>
</div>
<div class="maincontent">
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
<p>maincontent maincontent maincontent maincontent
maincontent maincontent maincontent maincontent
maincontent maincontent maincontent </p>
</div>

<div class="sidebar_right">right data right data right data right data right data right data </div>
</div>
</div>
</div>
</div>
</div>
</body></html>

Layout doesn't work in Opera

T_Ma

SuzyUK

T_Ma

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week