Post by momotaro on Apr 20, 2009 18:34:13 GMT -5
I am in the process of coding a website template. I have a problem where the sidebar div doesn't show up next to the main content div. But, this only happens in Firefox and Safari. It's fine in IE 7. Any suggestions?
Code:
A screenshot in Firefox:
home.comcast.net/~drew.notarnicola/templateshot.png
Code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//en”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>.:<[/html document\]>:.</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
<style type="text/css">
body {background-color: #FFFFFF; margin:0 auto; width:100%; font-family:Courier, Lucida Console;}
#wrap {margin:5px 5px 0 5px;}
#c1 {width:850px; height:67px; background:url("http://www.majhost.com/gallery/Ultimate-Collector/stuff/gradient.php.png");}
#headwrap {width:100%; height:67px; background-color:#993A33; padding:3px 0 3px 0;}
#c2, c3 {float:left;}
#c2 {width:600px; background-color:#E3E3E3;}
#c3 {width:250px; background-color:#B6B6B6;}
#bodywrap {width:850px; float:center;}
.widgethead {margin: 0 10px 0; font-color:#993A33; background:url("http://www.majhost.com/gallery/Ultimate-Collector/stuff/gradient_small.png");}
.widgetbody {margin: 0 10px 0 10px; background-color:#E3E3E3;}
p {margin: 0 10px 0 10px; text-align:left;}
</style>
</head>
<body>
<center>
<div id="wrap">
<div id="headwrap">
<div id="c1"><p>Header #c1</p></div>
</div>
<div id="bodywrap">
<div id="c2"><p>Main Content #c2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p></div>
<div id="c3"><p>Sidebar #c3</p>
<div class="widgethead"><p>w00t</p></div>
<div class="widgetbody"><p>hahahahahaha</p><br /><br /></div><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</center>
</body>
</html>
A screenshot in Firefox:
home.comcast.net/~drew.notarnicola/templateshot.png
