2 column float issue
Posted: Sat May 31, 2008 10:59 pm
The ID center div is being pushed down past the ID left div in Firefox but not in IE7. I would have expected the opposite from the 2 browsers, but anyway this is an issue.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>Website title</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> body {font-family:sans-serif;background:#404040;} /* Links */ a {color:#1E90FF;text-decoration:none;font-weight:bold;} a:hover {text-decoration:underline;} #header { width:800px; border:1px solid silver; padding:10px 10px 10px 10px; margin: 5px auto 10px auto; background:white; } #header h1, h2 {margin:0;} #header2 {background:black;color:white;padding:15px 15px 15px 15px;} #footer {background:black;color:white;padding:4px 10px 4px 10px;font-family:sans;margin:15px 0 0 0;font-size:70%;text-align:center;clear:both;} #main { font-family:sans-serif; width:800px; border:1px solid silver; padding:10px; margin: 5px auto 5px auto; color:black; background:white; } /* Left Col */ #left { padding:10px; width:120px; background:#404040; color:white; float:left; } /* Center Col */ #center { float:left;border:2px solid red;margin:10px; } </style></head><body><div id="header"><div id="header2"><h1>Website title</h1><h2>Optional quote or something goes here.</h2></div></div> <div id="main"> <!-- Left Column --><div id="left"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li><li><a href="#">Link</a></li></ul></div> <!-- Center Column --><div id="center"><h2>Heading 2</h2>Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div id="footer">Copyright 2008. <a href="http://validator.w3.org/check?uri=referer">XHTML</a> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></div></div></body></html>