css aligning issue

dottedquad

12-17-2005, 01:40 PM

css code:
#container
{
width:795px;
margin:0 auto 0 auto;
border:1px solid black;
}

#header
{
height:55px;
width:100%;
}

#navigation
{
width:100%;
}

#left-float
{
float: left;
width: 150px;
border: 1px solid red;
}

#right-float
{
float: right;
margin: 10px 10px 10px 10px;
border: 1px solid orange;
}

page code:
<body>
<div id="container">
<div id="header">asdf</div>

<div id="navigation">
<div id="left-float">Left float!</div>
<div id="right-float">Right float!</div>
</div>
</div>
</body>

The container is supposed to hold everything and the navigation is supposed to hold to two floats.

to view what issue i'm getting visit: www.techglo.net/office/index.php

Pennimus

12-17-2005, 02:48 PM

dottedquad

12-17-2005, 08:04 PM

Works fine in IE, but no border in FF. Try putting a div with {clear: both;} containing a non breaking space under your two floats or alternatively a similar div under your navigation (but without clear both). To quote Aerospace_Eng, "firefox needs to be told there is still something in the container".

Hey, thanks for the help. I've made plenty of layouts like this without any problems. Half the time I forget to put the clear in and wonder why it's not working :eek:

-Thanks