Hi all I am struggling at the following piece of code:
<div id="Container">
<div id="MainContentArea">
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="GuitarInStripe"></div>
</div>
<div id="Footer">© - 2007. travisfalls.com. All Rights
Reserved.</div>
</div>
I have the LeftContent area floating left with a width of 55%. The
LeftContent and Right Content display great next to each other.
The Left column however displays outside of MainContentArea. I was
expecting the bottom edge of MainContentArea would coincide with the bottom
edge of LeftContent. What should I look at? I am very new to styles... I
was a table guy.
Best Regards,
Travis
#Container
{
border:dashed 2px #669900;
padding-left:15px;
padding-right:10px;
padding-top:8px;
background-image:url("Images/PageBackground.jpg");
background-repeat:repeat-y;
height:100%;
}
#MainContentArea
{
border:dashed 2px #667700;
background-image:url("Images/RugbyGuyBackground.jpg");
background-repeat:no-repeat;
background-position:left bottom;
width:800px;
font-size:80%;
}
#LeftContent
{
border:dashed 2px #666600;
width:55%;
margin-right:15px;
padding-bottom:20px;
float:left;
}
#RightContent
{
border:dashed 2px #665500;
width:40%;
}
#Footer
{
border:dashed 2px #660011;
position:absolute;
bottom:2px;
clear:both;
color:#ffffff;
font-size:75%;
text-align:center;
height:19px;
padding:4px;
width:90%;
}
#GuitarInStripe
{
background-image:url("Images/RacingStripesGuitar.jpg");
background-repeat:no-repeat;
width:118px;
height:259px;
position:absolute;
bottom:30px;
left:755px;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/