Jump to content

Firefox contorts my tableless page.


Jesdisciple

Recommended Posts

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...