|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
April 8th, 2004, 10:56 PM
|
|||
|
|||
|
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.
__________________
--blissdev
|
|
#3
April 9th, 2004, 01:13 PM
|
||||
|
||||
|
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.
|
|
#5
April 9th, 2004, 10:35 PM
|
||||
|
||||
|
Quote:
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
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Element Height Problem (Auto) |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
