CSS Forum

**silverglade** · 04:24 PM

hi , my footer looks fine in DW, but it flies to the left of page when seen in browser, i have no idea what to do, the #footer is in an iefixes file as display inline. other than that i dont know what to do. any help greatly appreciated. please scroll down to the "caravaggio" code in the css to see.

here is the page im talking about.

http://derekvanderven.com/phyllisgal...aravaggio.html

here is the css

Code:

@charset "utf-8";
/* CSS Document */

#wrapper {
margin: 100px auto 0 auto;
width: 790px;
height: 326px;
}
body {
background-color: #988A9F;
font-family:  "Times New Roman"  Times, Serif;
}

 #leftimage {
 float: left;
 width: 237px;
 height: 326px;
 }
 
 #rightimage {
 background-image: url( main.gif);
    background-repeat:no-repeat; 
 float: left;
 width: 553px;
 height: 326px;
 }
#imgwrapper {
 margin: auto;
    display: inline;
}
 
 #footer {
 float: left;
 background-color: #6878C1;
 text-align: center;
 width: 790px;
 height: 30px;
 border: 1px solid black;
 color: #ffffff;
 padding-top: .3em;
 }

 #copyright {
 float: left;
 text-align: left;
 width: 790px;
 height: 30px;
 color: #000000;
 padding-top: .3em;
 font-size: small;
 }
 
 #homeinfo {
  float: right;
  width: 175px;
  height: 75px;
  margin-top:250px;
  font-size: small;
  text-align: left;
  
}
 
 a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #CCCCCC;
}
a:active {
    color: #FFFFFF;
}
/**********************ABOUT US CODE**********************/
#leftlogo {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
    #wrapperabout {
    
    margin: 50px auto 0 auto;
    height: 400px;
    width: 790px;
    }
    
    #logocontainer {
    margin: 0 auto 0 auto;
    height: 400px;
    width: 790px;
     
    } 
     
 #homepage {
  margin: 0 0 0 0;
  height: 30px;
  width: 50px;
  text-align: center;
  padding: 10px;
  }
  
  #leftlogo a {
  color: #000000;
  border: black solid 1px;
  }
  
  #abouthomeinfo {
  float: left;
  width: 175px;
  height: 75px;
  margin-top:35px;
  font-size: small;
  text-align: left;
  
}
  
  #padded {
  padding: 2em;
  }
  
  /**** CARAVAGGIO CODE *******/
   
  #wrapper_caravaggio {
    
    margin: 0 auto 0 auto;
    height: 725px;
    width: 790px;
    }
  #logocontainer_caravaggio {
    margin: 0 auto 0 auto;
    height: 725px;
    width: 790px;
    }
    
    #leftlogo_caravaggio {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 725px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 725px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_caravaggio {
  padding: 2em 2em 0 2em;
  height: 700px;
  }
  
  #leftlogo_caravaggio a {
  color: #000000;
  border: black solid 1px;
  }
  
  #gallery_caravaggio {
   background-color: #988A9F;
   border: 1px solid #000000;
   text-align: center;
   padding: 5px;
   height: 30px;
   width: 50px;
   color: #ffffff;
   margin-left: 17em;
  
   }
   
  /****************CARAVAGGIO IMAGE GALLERY PAGE***************/ 
   
   #leftlogo_caravaggio_image a {
  color: #000000;
  border: black solid 1px;
  }
   #wrapper_caravaggio_image {
    
    margin: 50px auto 0 auto;
    height: 725px;
    width: 790px;
    }
  #logocontainer_caravaggio_image {
    margin: 0 auto 0 auto;
    height: 725px;
    width: 790px;
    }
    
    #leftlogo_caravaggio_image {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 500px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio_image{
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 500px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
   #caravaggio_header
   {
   float: left;
   margin: 30px 0 0 40px;
   }
   
   #caravaggio_image_container
   {
    float: left;
    width: 520px;
    height: 300px;
    margin-top: 50px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 20px;
    
    }
    #caravaggio1
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 90px;
     height: 123px;
     }
     
     #caravaggio2
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 115px;
     height: 90px;
     }
      #caravaggio3
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 95px;
     height: 90px;
     }
     
      #caravaggio4
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 95px;
     height: 90px;
     }
      
    /**** CARAVAGGIO CODE *******/
  
  #wrapper_caravaggio {
    
    margin: 50px auto 0 auto;
    height: 450px;
    width: 790px;
    }
  #logocontainer_caravaggio {
    margin: 0 auto 0 auto;
    height: 450px;
    width: 790px;
    }
    
    #leftlogo_caravaggio {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_caravaggio {
  padding: 2em 2em 0 2em;
   
  }
  
  #leftlogo_caravaggio a {
  color: #000000;
  border: black solid 1px;
  }
  
  #gallery_caravaggio {
   background-color: #988A9F;
   border: 1px solid #000000;
   text-align: center;
   padding: 5px;
   height: 30px;
   width: 50px;
   color: #ffffff;
   margin-left: 17em;
  
   }
   /**************ICART CODE**************/
   
   #wrapper_icart {
    
    margin: 50px auto 0 auto;
    height: 650px;
    width: 790px;
    }
  #logocontainer_icart {
    margin: 0 auto 0 auto;
    height: 650px;
    width: 790px;
    }
    
    #leftlogo_icart {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 650px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_icart {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 650px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_icart {
  padding: 2em 2em 0 2em;
   
  }
  
  #leftlogo_icart a {
  color: #000000;
  border: black solid 1px;
  }
  /****************ICART GALLERY CODE********************/
  
   #icart_image_container
   {
    float: left;
    width: 400px;
    height: 300px;
    margin-top: 100px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 125px;
    
    }
    
     .icart_image
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: auto;
     height: 90px;
     }
     
     /********************VILLON CODE***********************/
     
     #villon_image_container
   {
    float: left;
    width: 400px;
    height: 300px;
    margin-top: 100px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 125px;
    
    }
    
    /***********************OTHER ARTISTS CODE *****************/
    
     #wrapper_other {
    
    margin: 50px auto 0 auto;
    height: 400px;
    width: 790px;
    }
  #logocontainer_other {
    margin: 0 auto 0 auto;
    height: 400px;
    width: 790px;
    }
    
    #leftlogo_other {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 400px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_other {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 400px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_other {
  padding: 2em 2em 0 2em;
   
  }
  
  #leftlogo_other a {
  color: #000000;
  border: black solid 1px;
  }
/******************************OTHER ARTISTS CONTACT CODE****************/

.contact
{ margin-bottom: 10px;
}

#contactform {
    width: 60%;   /* this box flows right under the contactinfo box naturally? */
    float:right; 
    margin-top: 1.5em; 
    clear:both ; 
}   

/******************************SITEMAP CODE**************************/

#map_container
   {
    margin: 50px 0 0 100px;
    float: left;
    width: 400px;
    height: 300px;
    
    }
    
    #map_container a
    {
     color: #996600;
    }
            
      
     
    
     
     #map_container p {
     line-height: 120%;
     }

and here is the html

Code:

<!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=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link href="phyllis.css" rel="stylesheet" type="text/css"/>

<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />

<script src="thumbnailviewer.js" type="text/javascript">

/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
 
<title>caravaggio works</title>
 

 

<style type="text/css">
<!--
.style1 {font-weight: bold}
 
 #caravaggio_image_container img {
 border: 2px solid #988A9F;
 }
 
-->
</style>
</head>

<body>
<div id="wrapper_caravaggio"> 
    <div id="imgwrapper">
   <div id="leftlogo_caravaggio_image"> 
   <div id="homepage"><a href="home.html">Home</a><a href="home.html" class="style1"></a></div> 
   </div> 
   
    <div id="rightlogo_caravaggio_image">
       <div id="caravaggio_header">
         <p><strong>Caravaggio Originals</strong></p>
      </div>
       <div id="caravaggio_image_container">
        
         
         <div id="caravaggio1">
         <a href="new_pages/caravaggio/405px-Bacchino_malato_(Caravaggio).jpg" rel="thumbnail"   title="Caravaggio - &quot; Baccino malato &quot; "><img src="new_pages/caravaggio/Bacchino_malato_thumb.jpg" width="78" height="121" /></a></div>
          
      <div id="caravaggio2"><a href="new_pages/caravaggio/764px-Caravaggio_Basket_of_Fruit.jpg" rel="thumbnail"   title="Caravaggio - &quot; Basket of Fruit &quot; ">
      <img src="new_pages/caravaggio/Basket_of_Fruit_thumb.jpg" width="115" height="90" /></a></div>
          
          
          <div id="caravaggio4"><a href="new_pages/caravaggio/439px-Amor_Victorious.jpg" rel="thumbnail"   title="Caravaggio - &quot; Amor Victorious &quot; "><img src="new_pages/caravaggio/Amor_Victorious_thumb.jpg" width="95" height="90" /></a></div>
          
         <div id="caravaggio3">
         <a href="new_pages/caravaggio/635px-Calling-of-st-matthew.jpg" rel="thumbnail"   title="Caravaggio - &quot; Calling of St. Matthew &quot; "><img src="new_pages/caravaggio/Calling-of-st-matthew_thumb.jpg" width="95" height="90" /></a></div>
       </div>
          
       
       </div>
      
       <!-- end image container-->
     </div>
    <!-- end rightlogo-->
   </div> <!--end imgwrapper-->
 
 
<div id="footer"><a href="about.html">About the gallery</a> |<a href="caravaggio.html"> Caravaggio </a>| <a href="rembrandt.html">Rembrandt</a> | <a href="titian.html">Titian </a>| <a href="davinci.html">Da Vinci</a> | <a href="other_artists.html">Other Artists </a>| <a href="resources.html">Resources</a> | <a href="site_map.html">Site map</a></div>







<div id="copyright"><pre class="style1"> &copy; Phyllis Gardner Gallery        Site design by: <a href="http://derekvanderven.com">derekvanderven.com</a></pre>
</div>
</div> <!-- end aboutwrapper-->

</body>
</html>

**LadynRed** · 05-08-2009, 04:26 PM

1 - CLEAR YOUR FLOATS - your wrapper is not 'containing' anything inside it.
2 - remove the height on #wrapper_carvaggio
2 - remove the float:left on #footer and add margin: 0 auto; to it.

Once you clear the floats in the wrapper, it should extend to meet the footer.
Derek, use Firefox and get the Firebug extension so you can see what's going on for yourself. It's a great help for debugging problems like this.

**silverglade** · 05-08-2009, 05:18 PM

thank you ladynred! well it looks perfect in IE6 now, but FF is ignoring my div formatting. its just text. i put margin: auto 0 on the footer and the copyright divs, i took off the height of the div you said. and thats about it. i couldnt find anything to clear because nothing was floating underneath anything. do you only clear things that are underneath other floats? sorry about that any more help greatly appreciated. thanks for looking at my code. derek

here is what it looks like now in FF.

http://derekvanderven.com/phyllisgal...aravaggio.html

**LadynRed** · 05-08-2009, 05:58 PM

The solutions I gave you above were NOT just for IE. Fixing all those things would have made it work properly in Firefox AND IE.

Quote:

do you only clear things that are underneath other floats?

No, you must clear the floats that are INSIDE your wrapper! To do that add overflow:auto to the wrapper div.

On the footer - remove the float:left ! As long as you have that on there, the footer is going to go left - where you're telling it to go and the margin: 0 auto; is ignored. Same goes for the copyright.

**silverglade** · 06:49 PM

when i add overflow: auto; to my wrapper, it makes a scrollbar and the content is mixed up. i took off the overflow auto because i dont know what else to do. my site is finished except for the bad footer and copyright at the bottom in FF.

here is the almost finished site

http://derekvanderven.com/phyllisgallery_raw/home.html

any more help to help me finish it would be GREATLY appreciated, thanks ladynred.

also, i do use firebug, and i do the "inspect" but it helps me more to edit the code and test in browser over and over. i dont know how to use the bug tool yet other than the inspect part and looking at the code.

here is the updated css.

Code:

@charset "utf-8";
/* CSS Document */

#wrapper {

margin: 100px auto 0 auto;
width: 790px;
height: 326px;
}
body {
background-color: #988A9F;
font-family:  "Times New Roman"  Times, Serif;
}

 #leftimage {
 float: left;
 width: 237px;
 height: 326px;
 }
 
 #rightimage {
 background-image: url( main.gif);
    background-repeat:no-repeat; 
 float: left;
 width: 553px;
 height: 326px;
 }
#imgwrapper {
 margin: auto;
    display: inline;
}
 
 #footer {
  margin: 0 auto;
 background-color: #6878C1;
 text-align: center;
 width: 790px;
 height: 30px;
 border: 1px solid black;
 color: #ffffff;
 padding-top: .3em;
   
 }

 #copyright {
 margin: 20px auto;
 text-align: center;
 width: 790px;
 height: 30px;
 color: #000000;
 padding-top: .3em;
 font-size: small;
 
 }
 
 #homeinfo {
  float: right;
  width: 175px;
  height: 75px;
  margin-top:250px;
  font-size: small;
  text-align: left;
  
}
 
 a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #CCCCCC;
}
a:active {
    color: #FFFFFF;
}
/**********************ABOUT US CODE**********************/
#leftlogo {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
    #wrapperabout {
    
    margin: 50px auto 0 auto;
    height: 400px;
    width: 790px;
    }
    
    #logocontainer {
    margin: 0 auto 0 auto;
    height: 400px;
    width: 790px;
     
    } 
     
 #homepage {
  margin: 0 0 0 0;
  height: 30px;
  width: 50px;
  text-align: center;
  padding: 10px;
  }
  
  #leftlogo a {
  color: #000000;
  border: black solid 1px;
  }
  
  #abouthomeinfo {
  float: left;
  width: 175px;
  height: 75px;
  margin-top:35px;
  font-size: small;
  text-align: left;
  
}
  
  #padded {
  padding: 2em;
  }
  
  /**** CARAVAGGIO CODE *******/
   
  #wrapper_caravaggio {
    
    margin: 0 auto 0 auto;
     /*height: 725px;    ladynred fix */
    width: 790px;
    }
  #logocontainer_caravaggio {
    margin: 0 auto 0 auto;
    height: 725px;
    width: 790px;
    }
    
    #leftlogo_caravaggio {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 725px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 725px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_caravaggio {
  padding: 2em 2em 0 2em;
  height: 700px;
  }
  
  #leftlogo_caravaggio a {
  color: #000000;
  border: black solid 1px;
  }
  
  #gallery_caravaggio {
   background-color: #988A9F;
   border: 1px solid #000000;
   text-align: center;
   padding: 5px;
   height: 30px;
   width: 50px;
   color: #ffffff;
   margin-left: 17em;
  
   }
   
  /****************CARAVAGGIO IMAGE GALLERY PAGE***************/ 
   
   #leftlogo_caravaggio_image a {
  color: #000000;
  border: black solid 1px;
  }
   #wrapper_caravaggio_image {
    
    margin: 50px auto 0 auto;
    height: 725px;
    width: 790px;
    }
  #logocontainer_caravaggio_image {
    margin: 0 auto 0 auto;
    height: 725px;
    width: 790px;
    }
    
    #leftlogo_caravaggio_image {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 500px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio_image{
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 500px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
   #caravaggio_header
   {
   float: left;
   margin: 30px 0 0 40px;
   }
   
   #caravaggio_image_container
   {
    float: left;
    width: 540px;
    height: 300px;
    margin-top: 50px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
 
    
    }
    #caravaggio1
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 90px;
     height: 123px;
     }
     
     #caravaggio2
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 115px;
     height: 90px;
     }
      #caravaggio3
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 95px;
     height: 90px;
     }
     
      #caravaggio4
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 95px;
     height: 90px;
     }
     
       #titian1
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 60px;
     height: 90px;
     }
     
     #titian2
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 70px;
     height: 90px;
     }
      #titian3
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 74px;
     height: 90px;
     }
     
      #titian4
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 126px;
     height: 90px;
     }
      
    /**** CARAVAGGIO CODE *******/
  
  #wrapper_caravaggio {
    
    margin: 50px auto 0 auto;
    height: 450px;
    width: 790px;
    }
  #logocontainer_caravaggio {
    margin: 0 auto 0 auto;
    height: 450px;
    width: 790px;
    }
    
    #leftlogo_caravaggio {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_caravaggio {
  padding: 2em 2em 0 2em;
   
  }
  
  #leftlogo_caravaggio a {
  color: #000000;
  border: black solid 1px;
  }
  
  #gallery_caravaggio {
   background-color: #988A9F;
   border: 1px solid #000000;
   text-align: center;
   padding: 5px;
   height: 30px;
   width: 50px;
   color: #ffffff;
   margin-left: 17em;
  
   }
   /**************REMBRANDT CODE**************/
   
  #rembrandt1
    {
    float: left;
    text-align: center;
    width: 78px;
    height: 90px;
    margin-top: 40px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50px;
     }
     
     #rembrandt2
    {
    float: left;
    text-align: center;
    width: 105px;
    height: 90px;
    margin-top: 40px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 20px;
     }
      #rembrandt3
    {
    float: left;
    text-align: center;
    width: 117px;
    height: 90px;
    margin-top: 40px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 20px;
     }
     
      #rembrandt4
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 71px;
     height: 90px;
     }
     

    /***********************OTHER ARTISTS CODE *****************/
    
     #wrapper_other {
    
    margin: 50px auto 0 auto;
    height: 400px;
    width: 790px;
    }
  #logocontainer_other {
    margin: 0 auto 0 auto;
    height: 400px;
    width: 790px;
    }
    
    #leftlogo_other {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 400px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_other {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 400px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_other {
  padding: 2em 2em 0 2em;
   
  }
  
  #leftlogo_other a {
  color: #000000;
  border: black solid 1px;
  }
/******************************OTHER ARTISTS CONTACT CODE****************/

.contact
{ margin-bottom: 10px;
}

#contactform {
    width: 60%;   /* this box flows right under the contactinfo box naturally? */
    float:right; 
    margin-top: 1.5em; 
    clear:both ; 
}   

/******************************SITEMAP CODE**************************/

#map_container
   {
    margin: 50px 0 0 100px;
    float: left;
    width: 400px;
    height: 300px;
    
    }
    
    #map_container a
    {
     color: #996600;
    }
            
      
     
    
     
     #map_container p {
     line-height: 120%;
     }

**LadynRed** · 06:44 PM

Remove the height on #wrapper_carvaggio, add back the overflow:auto - the scrollbars will go away and your footer will land where it belongs.

**silverglade** · 07:11 PM

sorry about this, but the wrapper_caravaggio has its height taken off, and when i add the overflow: auto; the footer pops perfectly in place, but i get a scrollbar.

here is the updated css

Code:

@charset "utf-8";
/* CSS Document */

#wrapper {
 margin: 100px auto 0 auto;
width: 790px;
height: 326px;
}
body {
background-color: #988A9F;
font-family:  "Times New Roman"  Times, Serif;
}

 #leftimage {
 float: left;
 width: 237px;
 height: 326px;
 }
 
 #rightimage {
 background-image: url( main.gif);
    background-repeat:no-repeat; 
 float: left;
 width: 553px;
 height: 326px;
 }
#imgwrapper {
 margin: auto;
    display: inline;
}
 
 #footer {
  margin: 0 auto;
 background-color: #6878C1;
 text-align: center;
 width: 790px;
 height: 30px;
 border: 1px solid black;
 color: #ffffff;
 padding-top: .3em;
   
 }

 #copyright {
 margin: 20px auto;
 text-align: center;
 width: 790px;
 height: 30px;
 color: #000000;
 padding-top: .3em;
 font-size: small;
 
 }
 
 #homeinfo {
  float: right;
  width: 175px;
  height: 75px;
  margin-top:250px;
  font-size: small;
  text-align: left;
  
}
 
 a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #CCCCCC;
}
a:active {
    color: #FFFFFF;
}
/**********************ABOUT US CODE**********************/
#leftlogo {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
    #wrapperabout {
    
    margin: 50px auto 0 auto;
    height: 400px;
    width: 790px;
    }
    
    #logocontainer {
    margin: 0 auto 0 auto;
    height: 400px;
    width: 790px;
     
    } 
     
 #homepage {
  margin: 0 0 0 0;
  height: 30px;
  width: 50px;
  text-align: center;
  padding: 10px;
  }
  
  #leftlogo a {
  color: #000000;
  border: black solid 1px;
  }
  
  #abouthomeinfo {
  float: left;
  width: 175px;
  height: 75px;
  margin-top:35px;
  font-size: small;
  text-align: left;
  
}
  
  #padded {
  padding: 2em;
  }
  
  /**** CARAVAGGIO CODE *******/
   
  #wrapper_caravaggio {
 
    margin: 0 auto 0 auto;
     /*height: 725px;    ladynred fix */
    width: 790px;
    }
  #logocontainer_caravaggio {
    margin: 0 auto 0 auto;
    height: 725px;
    width: 790px;
    }
    
    #leftlogo_caravaggio {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 725px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 725px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_caravaggio {
  padding: 2em 2em 0 2em;
  height: 700px;
  }
  
  #leftlogo_caravaggio a {
  color: #000000;
  border: black solid 1px;
  }
  
  #gallery_caravaggio {
   background-color: #988A9F;
   border: 1px solid #000000;
   text-align: center;
   padding: 5px;
   height: 30px;
   width: 50px;
   color: #ffffff;
   margin-left: 17em;
  
   }
   
  /****************CARAVAGGIO IMAGE GALLERY PAGE***************/ 
   
   #leftlogo_caravaggio_image a {
  color: #000000;
  border: black solid 1px;
  }
   #wrapper_caravaggio_image {
    
    margin: 50px auto 0 auto;
    height: 725px;
    width: 790px;
    }
  #logocontainer_caravaggio_image {
    margin: 0 auto 0 auto;
    height: 725px;
    width: 790px;
    }
    
    #leftlogo_caravaggio_image {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 500px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio_image{
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 500px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
   #caravaggio_header
   {
   float: left;
   margin: 30px 0 0 40px;
   }
   
   #caravaggio_image_container
   {
    float: left;
    width: 540px;
    height: 300px;
    margin-top: 50px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
 
    
    }
    #caravaggio1
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 90px;
     height: 123px;
     }
     
     #caravaggio2
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 115px;
     height: 90px;
     }
      #caravaggio3
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 95px;
     height: 90px;
     }
     
      #caravaggio4
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 95px;
     height: 90px;
     }
     
       #titian1
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 60px;
     height: 90px;
     }
     
     #titian2
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 70px;
     height: 90px;
     }
      #titian3
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 74px;
     height: 90px;
     }
     
      #titian4
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 126px;
     height: 90px;
     }
      
    /**** CARAVAGGIO CODE *******/
  
  #wrapper_caravaggio {
     
    margin: 50px auto 0 auto;
    height: 450px;
    width: 790px;
    }
  #logocontainer_caravaggio {
    margin: 0 auto 0 auto;
    height: 450px;
    width: 790px;
    }
    
    #leftlogo_caravaggio {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_caravaggio {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 450px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_caravaggio {
  padding: 2em 2em 0 2em;
   
  }
  
  #leftlogo_caravaggio a {
  color: #000000;
  border: black solid 1px;
  }
  
  #gallery_caravaggio {
   background-color: #988A9F;
   border: 1px solid #000000;
   text-align: center;
   padding: 5px;
   height: 30px;
   width: 50px;
   color: #ffffff;
   margin-left: 17em;
  
   }
   /**************REMBRANDT CODE**************/
   
  #rembrandt1
    {
    float: left;
    text-align: center;
    width: 78px;
    height: 90px;
    margin-top: 40px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50px;
     }
     
     #rembrandt2
    {
    float: left;
    text-align: center;
    width: 105px;
    height: 90px;
    margin-top: 40px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 20px;
     }
      #rembrandt3
    {
    float: left;
    text-align: center;
    width: 117px;
    height: 90px;
    margin-top: 40px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 20px;
     }
     
      #rembrandt4
    {
    float: left;
    text-align: center;
    margin: 40px 0 0 20px;
     width: 71px;
     height: 90px;
     }
     

    /***********************OTHER ARTISTS CODE *****************/
    
     #wrapper_other {
    
    margin: 50px auto 0 auto;
    height: 400px;
    width: 790px;
    }
  #logocontainer_other {
    margin: 0 auto 0 auto;
    height: 400px;
    width: 790px;
    }
    
    #leftlogo_other {
 float: left;
background-image: url( leftlogo.gif);
    background-repeat:no-repeat;
    height: 400px;
    width: 211px;
    background-position: top right;
    background-color: #DCCBE2;

    }
#rightlogo_other {
 
 float: left;
background-image: url( rightlogo.gif);
    background-repeat:no-repeat;
    height: 400px;
    width: 579px;
    background-position: top left;
    background-color: #ffffff;
     
   font-size: small;
    }
    
     #padded_other {
  padding: 2em 2em 0 2em;
   
  }
  
  #leftlogo_other a {
  color: #000000;
  border: black solid 1px;
  }
/******************************OTHER ARTISTS CONTACT CODE****************/

.contact
{ margin-bottom: 10px;
}

#contactform {
    width: 60%;   /* this box flows right under the contactinfo box naturally? */
    float:right; 
    margin-top: 1.5em; 
    clear:both ; 
}   

/******************************SITEMAP CODE**************************/

#map_container
   {
    margin: 50px 0 0 100px;
    float: left;
    width: 400px;
    height: 300px;
    
    }
    
    #map_container a
    {
     color: #996600;
    }
            
      
     
    
     
     #map_container p {
     line-height: 120%;
     }

and here is a sample page

Code:

<!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=utf-8" />
<link href="phyllis.css" rel="stylesheet" type="text/css"/>
 
<title>rembrandt</title>
 

 

<style type="text/css">
<!--
.style1 {font-weight: bold}
.style3 {font-family: "Times New Roman", Times, serif}
 
 
-->
</style>
</head>

<body>
<div id="wrapper_caravaggio"> 
    <div id="logocontainer">
  <div id="leftlogo_caravaggio"> 
 <div id="homepage"><a href="home.html">Home</a><a href="new_pages/home.html" class="style1"></a></div> 
   </div><!--end leftlogo_cheret-->
    
    <div id="rightlogo">
    <div id="padded"> 
      <p><span class="style3"><strong>Rembrandt</strong><br />
        <br />
        <br /></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum  ligula sit amet nibh mollis sagittis. Phasellus et odio sit amet orci  tristique condimentum ac fringilla sem. Sed egestas magna eget est  tristique blandit. Nam mollis tellus eu enim sollicitudin at dapibus  velit pretium. Quisque elit neque, iaculis id ultricies et, placerat  nec nibh. Aenean rhoncus vulputate libero, a mollis velit aliquet sit  amet. Vestibulum euismod porttitor nisi, sit amet luctus risus  dignissim a. Sed purus justo, accumsan ut aliquam ut, varius vitae  purus. Maecenas auctor diam vitae orci adipiscing ac commodo lorem  ultrices. In hac habitasse platea dictumst. Nam ut mi sed lectus  fringilla laoreet. Quisque placerat sem eget ante aliquam ultricies.  Suspendisse potenti. Pellentesque quis mi quis tortor tincidunt  facilisis. In a velit turpis, id sagittis ligula. Vestibulum faucibus  ante ut magna luctus a laoreet erat convallis. </p>
        <p>Curabitur blandit tortor et dui rhoncus vestibulum. Lorem ipsum  dolor sit amet, consectetur adipiscing elit. Fusce viverra urna eget  arcu interdum vitae laoreet turpis gravida. Integer et lacus enim.  Morbi vel leo sed lorem rhoncus vestibulum eget sit amet ligula. Sed  adipiscing dolor et </p>
            <p><br />
              <br />
                <br />
                </p>
        <div id="gallery_caravaggio"><a href="works_rembrandt.html">Gallery of Works</a></div>
      </div>
      
    <!--end padded-->
   </div> 
    <!-- end rightlogo-->
   </div> <!--end logocontainer-->
 
 
<div id="footer"><a href="about.html">About the gallery</a> |<a href="caravaggio.html"> Caravaggio </a>| <a href="rembrandt.html">Rembrandt</a> | <a href="titian.html">Titian </a>| <a href="davinci.html">Da Vinci</a> | <a href="other_artists.html">Other Artists </a>| <a href="resources.html">Resources</a> | <a href="site_map.html">Site map</a></div>








<div id="copyright"><pre class="style1"> &copy; Phyllis Gardner Gallery        Site design by: <a href="http://derekvanderven.com">derekvanderven.com</a></pre>
</div>

</div> <!-- end about wrapper-->
</body>
</html>

**LadynRed** · 05-08-2009, 07:09 PM

Did you upload the changes ? I'm still seeing the height on the wrapper.

The other option would be to put clear:both on the #footer.

**silverglade** · 05-08-2009, 07:20 PM

I LOVE YOU WEB GODDESS!!! it WORKED!!! clear both on the footer WORKED> HAHAHAHAHAH!!!! my site is FINISHED< ive been working on it since 2am today and its now 6pm. also, my code is horrible, that makes me sad. like to have an image gallery, i made a separately sized div for each image, with margin next to it to space them out. is that the best way to do it? because it was excruciating. YOU ARE AWESOME>.. wow that made my day. the final push to completion. now to upload it all. OK its all uploaded WOOT. check it out . my redone newbie site.

http://derekvanderven.com/phyllisgallery_raw/home.html

**LadynRed** · 05-08-2009, 08:58 PM

You're welcome!!

Quote:

i made a separately sized div for each image, with margin next to it to space them out. is that the best way to do it?

Well, that's one way. You could also use a list for something like that.