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

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    13

    CSS Element Height Problem (Auto)


    I wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me.
    (Problem is only in good browsers mozila/firebird)

    Here it is with the height of #main @ auto (attached)
    Here it is with the height of #main @ 600px (attached)

    Here is the HTML code:

    Code:
    <!-- Code 		-->
    
    <!-- Document 	-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Ben Gunn</title>
    		<link rel="stylesheet" href="index.css" />
    	</head>
    	<body>
    
    		<div id="main">
    			<img src="images/default_header.gif" id="header" height="120" width="749"/>
    			<div id="content">
    				 <div class="left">
    				 	<ul id="nav">
    						<li><a href="#">News</a></li>
    						<li><a href="#">Music</a></li>
    						<li><a href="#">Media</a></li>
    						<li><a href="#">Bio</a></li>
    						<li><a href="#">Contact</a></li>
    					</ul>
    				 </div>
    				<div class="right">
    					  	
    				</div>
    			</div>
    		</div>
    		<br /><br />
    	</body>
    </html>
    And here is the code for the CSS:
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background-color: #666666;
    	}
    
    #header{
    	margin-left: 2px;
    }	
    	
    #main {
    	position: relative;
    	width: 756px;
    	height: 600px;
    	left: 50%;
    	margin-left: -355px;
    	margin-top: 20px;
    	background-image:url("images/background-bezel.gif");	
    	background-repeat: repeat-y;
    	padding: 0px;
    	padding-bottom: 20px;
    	/*border: black 1px solid;*/
    	}
    	
    #content{	
    	padding: 10px;
    }
    
    .left{
    	float: left;
    	width: 30%;
    	
    }
    .right{
    	float: right;
    	width: 60%;
    }
    #nav{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	border: none;
    	padding-left: 10px;
    	font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: white;
    	font-weight: lighter;
    }
    
    #nav li {
    		background-color: #8B0000;
    		border-bottom: 1px solid #CCCCCC;
    		margin: 0;
    		padding: 1px 0 2px 0;
    		}
    
    #nav li a {
    	display: block;
    	text-decoration: none;
    	width: 100%;
    	color: white;
    	padding-left: 5px;
    }
    
    html>body #nav li a {
    		width: auto;
    		}
    		
    #nav li a:hover {
    		background-color: #191970;
    		color: #fff;
    	}
    Please notify me of the moronic mistakes I am making... thanks.
    Attached Images
    --blissdev
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    13
    *bump*
    --blissdev
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Mozilla/Firefox are doing exactly what you coded. Floats do not occupy space. Look at my float demo and float demo v.2

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    13
    can i get them to occupy space?
    --blissdev
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally Posted by blissdev
    can i get them to occupy space?
    Correctly? No. MSIE treats floats as if they occupy space. But, if they ever correct their float model, any pages dependent on the bug will break.

    Floats do have location, and you can use a clearing element to, well, clear the float. Did you study the code in my examples? In three of them, there are no clearing elements and the containing elements do not expand to fully wrap the float elements. In the other three, there are clearing elements, and the containing elements do wrap the float elements.

    I also referenced Position Is Everything as a source of excellent articles explaining the float model and IE’s many float bugs. All the articles on this site should be studied carefully and bookmarked for regular rereading.

    Float and absolute positioning are probably the least understood facets of CSS-P. Until fully grokked, they are sources of myriad gotchas.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    13
    yea, i had discovered clearing, but wasn't sure of it's uses. I shall implement it immediately, thank you for your help.
    --blissdev

IMN logo majestic logo threadwatch logo seochat tools logo