Hey web gurus and designers, Having a few problems with my site, I'm trying to use floating divs to layout my site... which works fine on Safari, Firefox, Chrome, iOS browser. BUT all the Internet Explorer (6,7,8,9) all seem to hate my floating divs. I've been searching the forums, google for the past 3 days, nothing seems to work. I'm trying to create a horizontal scrolling site with this layout: Fixed Header Menu (left) Content (right) Fixed Footer The menu is on float:left, content has no float. It lays out nicely in most browsers except IE. Content menu stretches and sizes are different per page. Someone please help, here's the code for my css: *{ margin:0; padding:0; } body{ background:#000; font-family:Garamond,Perpetua; font-size:15px; font-style:normal; color:#fff; letter-spacing:-1px; position:absolute; top:0px; left:0px; bottom:0px; height:100%; } .header{ height:100px; width:100%; padding:5px; position: fixed; top:1px; } .wrapper{ margin-top:110px; width:100%; } .menu{ width:200px; height:550px; float:left; display: inline-block; padding:5px; } .people{ /*width is sum of all pictures + padding */ width:2900px; height:550px; padding:5px; } .press{ /*width is sum of all pictures + padding */ width:1702px; height:550px; padding:5px; } .places{ /*width is sum of all pictures + padding*/ width:5082px; height:550px; padding:5px; } .passion{ /*width is sum of all pictures + padding */ width:1000px; height:550px; padding:5px; } .info{ /*width is sum of all pictures + padding */ width:1000px; height:550px; padding:5px; } .other{ /*width is sum of all pictures + padding */ width:1000px; height:550px; padding:5px; } img.pad { padding: 0px 5px 0px 0px ; } .footer{ padding:5px; height:20px; font-size:18px; color:#fff; position:fixed; bottom:1px; Clear:both; } Code (markup): And html here: <!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>Testing</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script src="js/jquery-1.7.min.js" type="text/javascript"> </script> </head> <body> <div class="header" id="header"> <img src="images/sitelogo.gif" alt="logo" height="100px" /> </div> <div class="wrapper" id="wrapper"> <div class="menu" id="mainmenu"> <div> <img src="images/menu0.gif" alt="menu_portfolio" /> </div> <div> <a href="index.html"><img src="images/menu1.gif" alt="menu_people" /></a> </div> <div> <a href="press.html"><img src="images/menu2.gif" alt="menu_press" /></a> </div> <div> <a href="places.html"><img src="images/menu3.gif" alt="menu_places" /></a> </div> <div> <a href="passion.html"><img src="images/menu4.gif" alt="menu_passion" /></a> </div> <div> <a href="info.html"><img src="images/menu5.gif" alt="menu_info" /></a> </div> </div> <div class="people" id="people"> CONTENT HERE </div> </div> <div class="footer" id="footer"> Copyright 2011 </div> </body> </html> Code (markup): So to simplify: <div header> </div> <div wrapper> <--- container for menu and content <div menu> <--- This is a menu with 6 buttons using divs to line them vertically <div people/places/passion/press/info> <--- This is the div for content and I put content in there, which horizontally stretches out </div>x3
Guys, its on this site: http://www. michoho.com It looks good on the iphone, ipad, safari (on a mac), chrome (on mac and pc), firefox (on pc). The only browsers that don't work are anything windows, IE 6/7/8/9 or mobile.
Just looking at the code on your site have you tried adding a width to the wrapper to incorporate the menu and the pictures as IE is possibly pushing the images down due to the size of the div and the wrapper not having any dimensions... I noticed that you have a width: 100% above but change that to a fixed width: 2000px etc
The problem is that IE is not a modern browser. You have comments before the doctype. This puts IE into quirks mode and won't attempt to perform like the other far more modern browsers. Remove everything before the doctype.
Laying an inline div content must used both with floated, and must clear it out using clear:both element.
@leancodes - Great! Providing a fix for a problem that was already fixed a month ago. Pure genius! You must be so proud of yourself. I'll put you on my incredibly long list of goofballs on DP.