CSS DIV Help

ludjer · November 28, 2007

http://ludgers.pcriot.com/

as you see the shadow thingies at the sides are not going right to the bottem or the top T_T

can some one help me

here is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>

<div id="wrapper">
    <div id="top">
    <center><img src="Images/headder.png" alt="Ludgers Headder" border="0" usemap="#Map"  />
<map name="Map" id="Map"><area shape="rect" coords="181,118,266,144" href="index.php" target="_self" />
<area shape="rect" coords="296,119,372,141" href="index.php?main=links" />
<area shape="rect" coords="409,120,522,142" href="index.php?main=projects" />
<area shape="rect" coords="567,120,652,143" href="index.php?main=about" />
<area shape="rect" coords="702,120,784,142" href="index.php?main=work" />
</map></center>
      <div class="clearer"> </div>
    </div>
    <div id="topmid" align="center">
        <table width="800" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="800" id="topic"> </td>
          </tr>
        </table>
    </div>
    <div class="middle">
    	<div class="container">
            <div class="midleft"> </div>
            <div class="midright"> </div>
            <div class="middle">middle
            </div>
        </div>
    </div>
    <div id="footer">
      <div id="footercont">
      
                  <br />
        Designed And Coded by <a href="mailto:ludjer@gmail.com">Ludger</a><br />
        <a href="http://www.mysql.com/" target="_blank">
            <img src="Images/mysql.gif" alt="Powered by MySQL" border="0" height="31" width="88"/></a> 
                    <a href="http://www.php.net/" target="_blank">
                         <img src="Images/php.gif" alt="Powered by PHP" border="0" height="31" width="88"/></a> 
                    <a href="http://validator.w3.org/check/referer" target="_blank">
                         <img src="Images/valid-xhtml10.gif" alt="Valid XHTML 1.0!" border="0" height="31" width="88" /></a> 
                    <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
                         <img src="Images/valid-css.gif" alt="Valid CSS!" border="0" height="31" width="88"/>                    </a>      </div>
  </div>
</div>
</body>
</html>

and here is the css

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333;
background-image:url(Images/midbg.png);
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
margin: 0px;
height: 100%;
text-align: left;
border: 1px solid #ddd;
}
#wrapper #middle #middletab {
height: 100%;
width: auto;
}

#container {
padding: 0px;
margin: 10px 0px 0px 0px;
background-attachment: scroll;
background-image: url(back.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}
#center {
height: auto;
width: 504px;
padding: 10px 20px 10px 20px;
float: left;
margin: 0px 0px 0px 6px;
line-height: 1.8em;
}
#right {
padding: 10px 20px 10px 20px;
height: auto;
width: 160px;
float: left;
margin: 0px 0px 0px 6px;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#center {
height: auto;
width: 504px;
padding: 10px 20px 10px 20px;
float: left;
margin: 0px 0px 0px 6px;
line-height: 1.8em;
}
#topcenter {
padding: 0px;
margin: 0px;
text-align: center;
width: 800px;
}
#top {
padding: 0px;
margin: 0px;
background-attachment: scroll;
background-image: url(Images/topbg.png);
background-repeat: repeat-x;
background-position: 0px 0px;
height: 150px;
width: 100%;
}
#wrapper   #topmid  {
background-image: url(Images/darkbg.png);
background-repeat: repeat-x;
}
#wrapper   #topmid   #topic {
background-image: url(Images/midbluebg.png);
background-repeat: repeat-x;
height: 100px;
width: 800px;
}
#wrapper  #middle  #midleft {
background-image: url(Images/midleftblue.png);
background-repeat: repeat-y;
width: 50px;
background-attachment: fixed;
background-position: right top;
}
#wrapper #middle #content {
width: 790px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
background-color: #FFFFFF;
}
#wrapper #middle #midright {
background-image: url(Images/midrightblue.png);
background-repeat: repeat-y;
width: 50px;
background-attachment: fixed;
background-position: left top;
}
#wrapper #middle {
background-image: url(Images/midbg.png);
width: 100%;
}
#wrapper #footer {
background-image: url(Images/footer.png);
height: 80px;
width: 100%;
text-align: center;
vertical-align: middle;
}
img{
border:0;
}#wrapper #footer #footercont {
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
color: #FFFFFF;
}
#wrapper #footer #footercont #icons {
float: right;
width: 400px;
}
#wrapper #footer #footercont #footertext {
float: left;
width: 400px;
text-align: center;
vertical-align: text-bottom;
}
#wrapper .middle .container {
margin-right: auto;
margin-left: auto;
width: 900px;
}
#wrapper .middle .container .midleft {
float: left;
width: 50px;
background-image: url(Images/midleftblue.png);
background-repeat: repeat-y;
height: inherit;
}
#wrapper .middle .container .midright {
float: right;
width: 50px;
background-image: url(Images/midrightblue.png);
background-repeat: repeat-y;
height: inherit;
}
#wrapper .middle .container .middle {
width: 780px;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
padding: 10px;
height: 100%;
}

bronzemonkey · November 28, 2007

It's a float clearing issue. You need to properly clear #container because it contains floated elements. This will do the trick:

/*Clearing for Modern Browsers */
#container:after {content:"."; display:block; height:0; font-size:0; line-height:0; clear:both; visibility:hidden;}
/*Clearing for IE6 only*/
* html #container {height:1%;}
/*Clearing for IE7 only*/
*+html #container {min-height:1px;}

Just add any other elements that contain floated elements (typically people have floated content in their footer). I've started adding {line-height:0} to the clearing for modern browsers because Opera sometimes produces some whitespace below a cleared footer because the generated content inherits the line-height.

Sign In

CSS DIV Help

Recommended Posts

ludjer

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information