#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    25
    Rep Power
    0

    CSS, Netscape and float problems


    Oh man this drives me crazy. Here is my HTML:

    Code:
    <div id="outerbox">
    	<div id="left">
    		Left Hand Float...
    	</div>
    
    	<div id="right">
    		Right Hand Float...
    	</div>
    </div>
    And here is my CSS:

    Code:
    #outerbox {
    	border: 1px solid #454545;
    	margin: 10px auto 0px;
    	padding: 8px 20px;
    	width: 738px;
    }
    #left {
    	background-color: #efefef;
    	float: left;
    	width: 500px;
    }
    #right{
    	background-color: #efefef;
    	float: left;
    	margin-left: 10px;
    	width: 220px;
    }
    And this is what it does in Netscape:



    What can I do about this?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    London
    Posts
    349
    Rep Power
    13
    Hmm renders fine in mozilla and ie...
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    25
    Rep Power
    0
    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.
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Dallas, Texas
    Posts
    19
    Rep Power
    0
    What version of netscape?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    25
    Rep Power
    0
    Version 7.1
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    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,
    Jeroen
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Dallas, Texas
    Posts
    19
    Rep Power
    0
    hey chapsymphony,

    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
    http://www.complexspiral.com/publica...aining-floats/


    Have fun!

IMN logo majestic logo threadwatch logo seochat tools logo