CSS Measurements Incorrect?

HTML & CSS
1

Hi,

i have the following div heigh measurements for my web page:
wrapper: 1500px;

header: 100px
navigation: 50px

content: 1350px - emcompasses the next 3 divs
pagedesc: 100px
imagecontent: 1200px - used to display images as thumbnails
footer - 50px

On paper they calculate fine, however, after i have impletemented this in real life, i notice that with regards to my content div, it seems to grow in height by almost 50px forcing my footer to drop slighly lower down to the page and not taking affect of my footer details e.g background-color.

One thing i tried to experiment with was the content div, I tried to decrease the size of my heigh to 1250px but by doing so it revealed my footer but css used the background color of my wrapper to somehow overlap it making the background color red and completely disregarding my footer details.

Please help if you can.

html test file:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	      <title> Shanghai Trip 2010</title>
	      <link rel="stylesheet" type="text/css" href="style_V1.css" />
		
	      <meta http-equiv="content-type"
				content="text/html; charset=utf-8"/>
	</head>
	<body>
	      <div id="wrapper">
		     <div id="header">
			    <h1> SHANGHAI TRIP 2010 </h1>
		     </div> 
        
		     <div id="navigation">
			    <ul>
				   <li><a href="index.php?link=home">Home</a></li>
				   <li><a href="index.php?link=shanghaizoo">Shangai Zoo</a></li>
				   <li><a href="index.php?link=chengtemple">Cheng Huang Temple</a></li>
			    </ul>
		     </div>
		     
		     <div id="content">
			    
			    <div class="pagedesc">
                    <p>
                                          
                    </p>
   
			    </div>
			    
			    
			    
			    <div class="imageswrapper">
			             
			    </div>
			     
		     </div> 
        
		     <div id="footer">
			    FOOTER
        
		     </div> 
	      
  
	      </div>
		 
			 
			  
		    
		 
	</body>
</html>





/*
 Date created: 7th October 2010
 Last Modified: 7th October 2010
*/
body
{
    background: #f3f2f3;
    color: #000000;
    font-family: Trebuchet MS, Arial, Times New Roman;
    font-size: 12px;

}

#wrapper
{
    background: red;
    /* first value represents top/bottom, while second represents left/right margin */
    margin: 0px auto; 
    width: 900px;
    height: 1500px;
}

#header
{
    background: #663300;
    width: 900px;
    height: 100px;
}



#navigation
{
    overflow: hidden;
    background: #3366CC;
    width: 900px;
    height: 50px;
}
#navigation ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation li
{
    display: block;
    float: left;
    padding: 2px;
     
}

#content
{
     
    background: #993300;
    width: 900px;
    height: 1350px;
} 

 .pagedesc
{ 
    width: 900px;
    height: 100px;
    font-size: 14px;
    padding: 1px;
    background-color: blue;
    
}

.pagedesc p
{
    margin: 0;
    border: 0;
    padding: 0px;
    
}
 
.imageswrapper
{
    margin: 0;
    border: 1px solid #330066;
    height: 1200px;
    width: 900px;
    overflow: hidden;
    text-align: center;
    float: left;
}


.thumb
{
    margin: 3px;
    border: 1px solid #ff8000;
    padding: 0px;
    height: auto; 
    text-align: center;
    float: left;
}

.thumb img
{
   display: inline;
    margin: 5px;
    border: 1px solid red;
    padding: 0px;
 
}

.thumbdesc
{
    text-align: center;
     border: 1px solid black;
}


.footer
{
    background: blue;
    height: 50px;
    width: 900px;
    
}

The page is not on the web as it is not finished but if you wouldn’t mind simply copying and pasting the code onto your editors, you will see what i mean

Thanks

2

Hi,

You haven’t takes into account padding margins or borders into your calculations.

There are default margins on most elements which may upset your calculations but you have also added padding and borders to elements without decreasing their width or height correspondingly.

However, you should not be designing like that anyway as you shouldn’t set height on content areas. The content should dictate the height and not some arbitrary figure that you throw at it.

Remove the height from your main content elements and let the grow with content. In that way users can resize text without breaking the page and you can add or remove content without having to change the css.

You will very rarely use height on content areas like that.

3

your footer is #footer in the markup and .footer in the css. so a class selector is no match for an id attribute :wink:

and i’ve looked at the computed style for the Content in ch, ie, ff and it’s saying 1350px :slight_smile:

4

What Paul said is pretty much spot on. Your dictating heights for the content area is just as bad as your not declaring line-height or worse, the use of PX fonts on body pretty well throwing accessibility right out the window!

It also doesn’t help that you are stating widths over and over again for no good reason… or that you have div – like #header – which are completely pointless (since you could just style the h1 directly) or the extra DIV around Content.

Though it’s hard to tell what markup you should have without actual content inside it. In particular .pageDesc and .imageswrapper are hard to fathom the point of at this point.

I would get a CSS reset in there so cross-browser design is simpler, remove the 900px width declarations off everything except #wrapper as being COMPLETELY pointless (since block level tags auto expand to whatever they’re inside!), lose the 1500px fixed height as bad design practice, probably lose the fixed height on the navigation too, getting rid of the DIV’s around the h1 and UL as pointless, get rid of the PX metric fonts at the very least on BODY and the content areas, etc, etc, etc…

Bottom line is you’ve got more markup than you probably need, and are declaring widths and heights on things that shouldn’t need widths on them and fixed heights are a bad idea.

You may also want to try using consistent single tabs instead of the odd-ball willy nilly spacings.