Jesdisciple Posted November 23, 2007 Share Posted November 23, 2007 I built this page in IE (because my laptop doesn't have Firefox yet) and it worked as expected, then I put it onto my desktop and Firefox screwed it up. How can I work around this? <html> <head> <title>Titled Document</title> <style type="text/css"> div.header{ background-color: #FF0000; width: 100%; height: 20%; } div.nav{ width: 20%; height: 73%; float: left; } div.content{ background-color: #FFFF00; width: 65%; height: 73%; float: left; } div.misc{ background-color: #000000; width: 15%; height: 73%; float: left; } div.footer{ background-color: #0000FF; width: 100%; height: 7%; } </style> </head> <body> <div class="header"></div> <div class="nav"></div> <div class="content"></div> <div class="misc"></div> <div class="footer"></div> </body></html> misc shouldn't break the line and footer shouldn't float under (yes, under - use background-color to verify this) anything.EDIT: I figured out that misc was breaking the line because Firefox adds the border width to the element's size (so I highlighted the divs with background-color rather than border), but footer is still misbehaving. Link to comment Share on other sites More sharing options...
virthen Posted November 24, 2007 Share Posted November 24, 2007 Just clear the floating: <html><head><title>Titled Document</title><style type="text/css">div.header{background-color: #FF0000;width: 100%;height: 20%;}div.nav{width: 20%;height: 73%;float: left;}div.content{background-color: #FFFF00;width: 65%;height: 73%;float: left;}div.misc{background-color: #000000;width: 15%;height: 73%;float: left}div.footer{background-color: #0000FF;width: 100%;height: 7%;}[b]div.spacer{clear:both}[/b]</style></head><body><div class="header"></div><div class="nav"></div><div class="content"></div><div class="misc"></div>[b]<div class="spacer"></div>[/b]<div class="footer"></div></body></html> Link to comment Share on other sites More sharing options...
Jesdisciple Posted November 24, 2007 Author Share Posted November 24, 2007 That's odd... footer hadn't been told to float so it would seem that telling it to not float would just be redundant. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.