scarhand Posted October 18, 2010 Share Posted October 18, 2010 <!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> <title>TITLE</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { margin: 0px; } .top { margin-bottom: 20px; background: red; } .top ul { float: right; margin: 0; padding: 0; list-style: none; } .top ul li { float: left; } .content { background: blue; } </style> </head> <body> <div class="top"> <ul> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> <div style="clear: both;"></div> </div> <div class="content"> why are you adding a top margin to the page? </div> </body> </html> For whatever reason, a top margin of 20px is being added to the top of the page above the red "top" box, even when I've set margins to 0 and only specified a bottom margin for that div. Quote Link to comment Share on other sites More sharing options...
scarhand Posted October 18, 2010 Author Share Posted October 18, 2010 OK so apparently if i remove the float from ".top ul li" the top margin disappears. wtf? Quote Link to comment Share on other sites More sharing options...
haku Posted October 19, 2010 Share Posted October 19, 2010 Get rid of the div with with the clear:both in it, and instead add overflow:auto to the containing div. This will do the same thing, and won't cause the problems you are seeing. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.