I need a bit of help, my DIVs are overlapping. The sidebar is fine, the posts area covers it, and the ad panel doesn't align. Here's my code: @charset "UTF-8"; body { background-color: #FFF; background-image: url(images/bg.gif); background-repeat: repeat-x; margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000; } #sidebar { width: 285px; float: left; margin: 0px; } #widget { font-family: "Century Gothic"; text-transform: uppercase; color: #FFF; background-color: #000; height: 40px; font-size: 24px; line-height: 55px; } #posts { width: 760px; } #date { font-family: "Century Gothic"; text-transform: uppercase; color: #FFF; background-color: #000; height: 40px; font-size: 24px; line-height: 55px; } #ads { float: right; width: 162px; } #post { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; background-color: #FFF; } #widgetbg { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; background-color: #FFF; } #ads img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #menu { font-family: "Century Gothic"; font-weight: bold; color: #000; text-align: center; font-size: 12px; text-transform: uppercase; margin: 5px; padding: 5px; } #content { width: 1207px; margin: 0px; padding: 0px; } #header { background-image: url(images/header.gif); background-repeat: no-repeat; background-position: center top; height: 100px; clear: both; } #container { width: 1207px; } Code (markup): <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title><?php bloginfo('name'); ?></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container" id="container"><div class="header" id="header"></div> <div class="menu" id="menu">home | features | Profiles | radars | jump offs | on locations | fashion | reviews | skin | videos | events | subscribe | contact us</div> <div class="content" id="content"> <!-- Sidebar --> <div class="sidebar" id="sidebar"> <div class="widget" id="widget">Recent Posts</div> <div class="widgetbg" id="widgetbg">Content for class "widgetbg" id "widgetbg" Goes Here</div> <div class="widget" id="widget">Categories</div> <div class="widgetbg" id="widgetbg">Content for class "widgetbg" id "widgetbg" Goes Here</div> <div class="widget" id="widget">Archives</div> <div class="widgetbg" id="widgetbg">Content for class "widgetbg" id "widgetbg" Goes Here</div> </div> <!-- Sidebar --> <!-- Posts --> <div class="posts" id="posts"> <div class="date" id="date">JANUARY 29, 2009</div> <div class="post" id="post">Content for class "post" id "post" Goes Here</div> </div> <!-- Posts --> <div class="ads" id="ads"><img src="images/ad1.jpg" width="162" height="331" alt="Barack to the Future" /><img src="images/ad2.jpg" width="162" height="398" alt="YRB Archives" /><img src="images/ad3.jpg" width="162" height="331" alt="English Laundry" /><img src="images/ad4.jpg" width="162" height="331" alt="How You Rock It L.A" /><img src="images/ad5.jpg" width="160" height="685" alt="YRB on MySpace" /><img src="images/ad6.jpg" width="162" height="331" alt="Yellow Rat Bastard Online Store" /></div> <!-- Ads --> </div></div> </body> </html> HTML:
ad panel doesn't align . It is better to give a link. Is the problem in IE or FF ? Be aware, IE still doesn't support xhtml document type .