SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast meltingInPhoenix's Avatar
    Join Date
    May 2005
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there an easy fix for this?

    I'm having the problem of a right floated nested div breaking the "container" in Mozilla & Firefox. Anyone know of a fix for this? I've searched the internet for a few hours and can't find any specifics on this. Thanks!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    
    * {
    	padding: 0;
    	margin: 0;
    	}
    	
    body {
    		font: 11px "Courier New", Courier, mono;
    		}
    
    #container {
    	position: relative;
        margin: auto;
    	width: 678px;
    	padding: 10px 20px 10px 20px;
    	text-align: left;
    	background-color: #DBE3DB;
    	border: 1px solid #333;
    	}
    	
    #rightCol {
    	position: relative;
    	float: right;
    	width: 208px;
    	height: inherit;
    	margin: 0px 0px 10px 10px;
    	padding: 0px;
    	border: 1px solid #999;
    	background-color: #C1CCB3;
    	}
    	
    .linkBox {
    	position: relative;
    	width: 90%;
    	margin: 10px 0;
    	background-color: #B0B8A0;
    	border: 1px dashed #fff;
    	}
    	
    h1 {
    	font-size: 16px;
    	}
    
    </style>
    </head>
    
    <body>
    
    <div id="container">
    
      <div id="rightCol">
    		<h1>div rightCol</h1>
    	  <p>#rightCol {<br>position: relative;<br>float: right;<br>
    		  width: 208px;<br>
    	  height: inherit;<br>margin: 0px 0px 10px 10px;<br>padding: 0px;<br>border: 1px solid #999;<br>}</p>
    				<p>This box will extend below the Container Div in Firefox 1.0.3 and Mozilla 1.7.7. I haven't tested this on other browsers yet, but alas, there is no point if doesn't work on these. </p>
      </div>
    
      <h1>div Container</h1>
      <p>#container {<br>position: relative;<br>margin: auto;<br>width: 678px;<br>padding: 10px 20px 10px 20px;<br>text-align: left;<br>background-color: #DBE3DB;<br>border: 1px solid #333;<br>}</p>
    </div>
    
    </body>
    </html>

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast meltingInPhoenix's Avatar
    Join Date
    May 2005
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nailed it

    I used the overflow: auto; on the container div and it fixed the problem. I could swear I had tried that already but who knows. Thanks for routing me to your informative website! Great job!

  4. #4
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And thank you too, your post solved my problem too, wish I saw it before I posted though. Oh well.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •