Menu
Hello
I am trying to sort my front page ‘contents’ section, which includes codes from 3rd party sites.
Initially I just tried it with absolute positioning and all worked seemed OK but I thought it would be better with floats … maybe a bad move on my part.
I want the layout like this
top left corner .. red ‘about us’ box
followed on left by .. green picture div
followed on left by .. black weather div
top right corner .. blue recycle widget div
It’s not finished yet, but see the code so far
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<meta http-equiv=”content-type”
content=”text/html;charset=utf-8″ />
<style type=”text/css”>
*{
margin:0px;
padding:0px;
}
body{
background-color:#efc77c;
}
#contents{
background-color:aqua;
border-top:2px solid black;
height:900px;
width:760px;
float:right;
}
#aboutus{
background-color:red;
width:500px;
height:150px;
float:left;
}
#picture{
width:450px;
height:350px;
background-color:lime;
float:left;
}
#widget{
background-color:blue;
width:190px;
height:565px;
float:right
}
#weather{
background-color:black;
height:202px;
width:330px;
padding-left:10px;
float:left;
}
</style>
</head>
<body>
<div id=”contents”>
<div id=”aboutus”>
About Us div
</div>
<div id=”widget”>
<!–
<object type=”application/x-shockwave-flash” data=”http://www.recyclenow.com/swf/recyclenow_08/SidebarWidget.swf” width=”170″ height=”545″>
<param name=”movie” value=”http://www.recyclenow.com/swf/recyclenow_08/SidebarWidget.swf”>
<param name=”allowscriptaccess” value=”always”>
<param name=”flashvars” value=”widgetBackgroundColor=ffffff”
–>
</div>
<div id=”picture”>
</div>
<div id=”weather”>
<a href=”http://www.netweather.tv/” target=”_blank”><img border=”0″ src=”http://www.netweather.tv/4web2/netweather4webi.pl?lat=;lon=;title=Newcastle;template=1″ alt=”Netweather” /></a>
</div>
</div>
</body>
</html>
All works fine on Firefox
All works fine on Chrome
But IE 7 and Opera
All works fine, if the actual recycle code is commented out, leaving only the blue div box.
However if the code is included, the red and blue boxes are still in their correct places but the other two have vanished. No image box or weather box
HELP !!
Please ! ?