I'm working on this new subsection for one of my sites. And i'm having this weird problem, my site looks very nice in IE, but in FF on of my tables is placed below the other content. You can see it here, http://media.dild.net/. This is my design code (divs and so on): <!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>dild.net - Funny Videos, Funny Movies, Video Clips</title> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <style type="text/css"> </style> </head> <body> <div id="top"> <div class="menu"> <div class="menu_frontpage"> <a href="../" title=""></a> </div> <div class="menu_videos"> <a href="../videos" title=""></a> </div> <div class="menu_pictures"> <a href="../pictures" title=""></a> </div> </div> </div> <div id="site"> <div id="content-left"> <div class="leftcontentheader"> Header </div> <div class="leftcontenttext"> Content </div> <div class="leftcontentheader"> Advertisment </div> <div class="leftcontenttext"> Banner </div> </div> <div id="content-right"> <div class="rightcontentheader"> Friends </div> <div class="rightcontenttext"> Random friends of dild.net </div> <div class="rightcontentheader"> Advertisment </div> <div class="rightcontenttext"> Banner </div> </div> </div> <div id="bund"> Footer </div> </body> </html> Code (markup): And this is my CSS: /* Global */ body { background-image: url('../images/bg.gifx'); background-repeat: repeat; background-color: #202020; margin: 0; text-align: center; font-size: 12px; font-family: 'Trebuchet MS', Verdana, Sans-Serif, Arial; } /* Design */ div#top { margin: 0 auto; background-image: url('../images/logo.gif'); background-repeat: no-repeat; background-color: #202020; width: 975px; height: 100px; float: left; clear:both; } div#site { margin: 0 auto; background-repeat: repeat-y; background-color: #202020; width: 955px; } div#content-left { background-color: #ebebeb; margin: 0 auto; width: 735px; float: left; border: 4px solid #e0e0e0; text-align: justify; padding: 0px 0px 0px 0px; clear:both; } div#content-right { background-color: #ebebeb; margin: 0px 0px 0px 0px; width: 200px; float: right; border: 4px solid #e0e0e0; text-align: justify; padding: 0px 0px 0px 0px; clear:both; } div#bund { margin: 0px auto 20px auto; background-image: url('../images/bund.gif'); background-repeat: no-repeat; background-color: #202020; width: 950px; height: 37px; text-align:center; clear:both } .leftcontentheader { background-image: url('../images/headerbg.gif'); background-repeat: repeat; margin: 0px; width: 735px; margin-bottom: 0px; background-color: #252525; padding: 0px; color: #FFFFFF; font-weight: bold; } .leftcontenttext { padding: 4px; } .rightcontentheader { background-image: url('../images/headerbg.gif'); background-repeat: repeat; margin: 0px; width: 200px; margin-bottom: 0px; background-color: #252525; padding: 0px; color: #FFFFFF; font-weight: bold; } .rightcontenttext { padding: 4px; } Code (markup): Do any of you people know how i can solve my problem?
I have made it work perfectly now, i just deleted the clear:both under both div#content-left and div#content-right .