PDA

View Full Version : div background color not lining up with the div next to it.


silverglade
02-28-2009, 05:29 PM
hi, in internet explorer 6 my page is messed up, i have a left div with a purple background color called #leftlogo_cheret,
and i want to line up the bottom of it with #rightlogo_cheret which has a white background. as it is the page looks messed up in DW, but when i look at the page in browser,it looks better for some reason, is that normal?. but if anyone could please let me know how to get the left purple background div to line up with the right white div id greatly appreciate it. thank you. derek
(the page looks fine in firefox) also, the bottom is showing way too much white space, more than i specified in #rightlogo_cheret and #leftlogo_cheret.
here is the page i am talking about .

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

here is the css to the page, scroll down to the "CHERET CODE"

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

#wrapper {
margin: 100px auto 0 auto;
width: 790px;
height: 326px;
}
body {
background-color: #988A9F;
}

#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;
}

/**** LAUTREC CODE *******/

#wrapper_lautrec {

margin: 50px auto 0 auto;
height: 725px;
width: 790px;
}
#logocontainer_lautrec {
margin: 0 auto 0 auto;
height: 725px;
width: 790px;
}

#leftlogo_lautrec {
float: left;
background-image: url( leftlogo.gif);
background-repeat:no-repeat;
height: 725px;
width: 211px;
background-position: top right;
background-color: #DCCBE2;

}
#rightlogo_lautrec {

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_lautrec {
padding: 2em 2em 0 2em;
height: 700px;
}

#leftlogo_lautrec a {
color: #000000;
border: black solid 1px;
}

#gallery_lautrec {
background-color: #988A9F;
border: 1px solid #000000;
text-align: center;
padding: 5px;
height: 30px;
width: 50px;
color: #ffffff;
margin-left: 17em;

}

/****************LAUTREC IMAGE GALLERY PAGE***************/

#leftlogo_lautrec_image a {
color: #000000;
border: black solid 1px;
}
#wrapper_lautrec_image {

margin: 50px auto 0 auto;
height: 725px;
width: 790px;
}
#logocontainer_lautrec_image {
margin: 0 auto 0 auto;
height: 725px;
width: 790px;
}

#leftlogo_lautrec_image {
float: left;
background-image: url( leftlogo.gif);
background-repeat:no-repeat;
height: 500px;
width: 211px;
background-position: top right;
background-color: #DCCBE2;

}
#rightlogo_lautrec_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;
}
#lautrec_header
{
float: left;
margin: 30px 0 0 40px;
}

#lautrec_image_container
{
margin: 50px 0 0 100px;
float: left;
width: 400px;
height: 300px;

}
.lautrec_image
{
float: left;
text-align: center;
margin: 40px 0 0 20px;
width: 67px;
height: 90px;
}

/**** CHERET CODE *******/

#wrapper_cheret {

margin: 50px auto 0 auto;
height: 500px;
width: 790px;
}
#logocontainer_cheret {
margin: 0 auto 0 auto;
height: 500px;
width: 790px;
}

#leftlogo_cheret {
float: left;
background-image: url( leftlogo.gif);
background-repeat:no-repeat;
height: 500px;
width: 211px;
background-position: top right;
background-color: #DCCBE2;

}
#rightlogo_cheret {

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;
}

#padded_cheret {
padding: 2em 2em 0 2em;
height: 500px;
}

#leftlogo_cheret a {
color: #000000;
border: black solid 1px;
}

#gallery_cheret {
background-color: #988A9F;
border: 1px solid #000000;
text-align: center;
padding: 5px;
height: 30px;
width: 50px;
color: #ffffff;
margin-left: 17em;

}


and here is the html to the page

<!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>about us</title>




<style type="text/css">
<!--
.style1 {font-weight: bold}


-->
</style>
</head>

<body>
<div id="wrapper_cheret">
<div id="logocontainer_cheret">
<div id="leftlogo_cheret">
<div id="homepage"><a href="home.html">Home</a><a href="home.html" class="style1"></a></div>
</div><!--end leftlogo_cheret-->

<div id="rightlogo_cheret">
<div id="padded_cheret">
<p><strong>Jules Cheret</strong><br />
May 31, 1836 - September 23, 1932<br />
<br />
Jules Cheret revolutionized printing when he invented the process of color lithography, wherein the image was drawn on the stone and each color was separately inked and printed,<img src="Cheret-Photograph.gif" width="160" height="229" border="0" align="right" style= "padding: 20px"/> enabling the artwork to exude an array of passionate colors in harmony. This had an enormous impact on advertising. The streets were ablaze with posters attached to walls and kiosks advertising La Goulue, Aristide Bruant, Loie Fuller, Mlle. Eglantine, May Milton, Jane Avril as well as periodicals, products and revues.</p>
<p>While doing these posters Jules Cheret executed numerous pastels and watercolors. His ‘Cherettes’, the lovely and lively women who could be seen dancing, playing cymbals or mandolins, dressed in the fashion of the day were a popular subject. His ability to strike a balance between the reality and fantasy of colors was unsurpassed, and to this day Jules Cheret is considered the “Master of Lithography.”<br />
<br />
<br />

</p>
<div id="gallery_cheret"><a href="works_cheret.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="lautrec.html">Henri de Toulouse-Lautrec</a> | <a href="cheret.html">Jules Cheret</a> | <a href="icart.html">Louis Icart </a>| <a href="villon.html">Jaques Villon</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>

silverglade
02-28-2009, 06:26 PM
i fixed the white space but the left purple div still isnt going all the way to the bottom. any help greatly appreciated. thank you. derek

domedia
02-28-2009, 08:31 PM
remove the height from this CSS rule:
#padded_cheret {
height:450px;
padding:2em 2em 0;
}

You don't need this height in there, and IE6 is adding the padding on top of the height.

silverglade
03-01-2009, 11:37 AM
Awesome Domedia! you are a css genius. it worked. here is the finished page.

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

thank you for taking the time to look through my code. i keep having to ask questions with each new website i do because the layout is a little different, but i hope the questions are getting less, maybe. i will know when i am ready when i can do websites and not have to ask questions on the forum. hehe. thanks again. now i think i can finish my site based on my previous pages. im almost done then. thank you. derek:-D:-D:-D:-D

domedia
03-01-2009, 05:58 PM
hehe you're welcome :)