August 22nd, 2003, 06:03 PM
CSS, Netscape and float problems
Oh man this drives me crazy. Here is my HTML:
And here is my CSS:
Left Hand Float...
Right Hand Float...
And this is what it does in Netscape:
border: 1px solid #454545;
margin: 10px auto 0px;
padding: 8px 20px;
What can I do about this?
August 22nd, 2003, 06:07 PM
Hmm renders fine in mozilla and ie...
August 22nd, 2003, 06:15 PM
Yeah, it should work in Netscape too I guess because theoretically it uses the same rendering engine as Mozilla.
Another thing I forgot to add: if I set the float value of the container to 'left' then i no longer get the whole thing centered on the page (which I did using: margin: 10px auto 0px; ). Weird.
August 22nd, 2003, 06:33 PM
What version of netscape?
August 22nd, 2003, 06:53 PM
August 22nd, 2003, 07:15 PM
I'm not really sure what you think is the problem. I think that Mozilla is correctly displaying part of the content outside of the outerbox (a float is taken out of the flow, and there is no height defined for the outerbox).
I assume from your gif text that you want all of the text to be inside the outerbox.
Try either of the following (I think you will like one of them):
.add 'overflow: auto;' to the #outerbox style
.add '<div style="clear: both"></div> to your HTML code, after the 'right' div inside the outerbox.
Hope this helps,
August 26th, 2003, 09:23 PM
Sorry it took a few days to reply. I just ran across this short article and I thought about your problem. It may not be the answer, but you might be able to apply it to your problem somehow. I sure hope it helps.
Article: "Containing Floats" by Complex Spiral Consulting