b1u3b0y
04-12-2009, 12:57 PM
HI, I am trying to auto height my body div but am running into the same problem. I'm looking for the height of my body div to be auto and the left and right divs that i'm placing inside to be auto as well... but for some reason the body div doesn't expand to fit the left and right divs... they just overfow out of the content area.. here is my code
* {margin: 0; padding: 0;}
img {border: 0px none;}
body {background: #FFB5D3; font-family: arial;}
h1 {color: #FA6997; font-size: 12px; line-height: 2em; text-align: center;}
#header {background: url('/kawaiitikal/images/header.png'); width: 800px; height: 301px; margin: 50px auto 0 auto;}
#body {background: url('/kawaiitikal/images/body.png') repeat-y; width: 800px; height: 294px; margin: 0 auto 0 auto;}
#footer {background: url('/kawaiitikal/images/footer.png'); width: 800px; height: 72px; margin: 0 auto 25px auto;}
.kawaiitikal {padding: 40px 0 0 60px;}
.video_l {width: 300px; height: auto; float: left; text-align: right; padding: 10px 20px 0 80px;}
.video_r {width: 300px; height: auto; float: left; text-align: left; padding: 10px 0 0 20px;}
.matthewmichael {color: #FFB5D3; font-family: arial; font-size: 10px; text-align: center; padding: 10px 0 0 0;}
.matthewmichael a {color: #FA2D90; text-decoration: none;}
<div id="header"><div class="kawaiitikal"><a href="http://www.b1u3b0y.com/kawaiitikal"><img src="/kawaiitikal/images/kawaiitikal_videos.png"></a></div></div>
<div id="body"><div class="video_l"><h1>Tales of Symphonia 2 (wii)</h1><embed src="http://www.youtube.com/p/1A28FB6CAC771698&hl=en" type="application/x-shockwave-flash" width="300" height="241"></embed></div><div class="video_r"><h1>Rune Factory (wii)</h1><embed src="http://www.youtube.com/p/7871B042BB9889E1&hl=en" type="application/x-shockwave-flash" width="300" height="241"></embed></div></div>
<div id="footer"><div class="matthewmichael">designed by <a href="http://www.matthewmichael.ca">matthewmichael</a></div></div>
I want to change that height to auto.. but everytime i do it doesn't expand.. so i've been having to put a px in... but that get's tedious since i'm going to want to add more content...
* {margin: 0; padding: 0;}
img {border: 0px none;}
body {background: #FFB5D3; font-family: arial;}
h1 {color: #FA6997; font-size: 12px; line-height: 2em; text-align: center;}
#header {background: url('/kawaiitikal/images/header.png'); width: 800px; height: 301px; margin: 50px auto 0 auto;}
#body {background: url('/kawaiitikal/images/body.png') repeat-y; width: 800px; height: 294px; margin: 0 auto 0 auto;}
#footer {background: url('/kawaiitikal/images/footer.png'); width: 800px; height: 72px; margin: 0 auto 25px auto;}
.kawaiitikal {padding: 40px 0 0 60px;}
.video_l {width: 300px; height: auto; float: left; text-align: right; padding: 10px 20px 0 80px;}
.video_r {width: 300px; height: auto; float: left; text-align: left; padding: 10px 0 0 20px;}
.matthewmichael {color: #FFB5D3; font-family: arial; font-size: 10px; text-align: center; padding: 10px 0 0 0;}
.matthewmichael a {color: #FA2D90; text-decoration: none;}
<div id="header"><div class="kawaiitikal"><a href="http://www.b1u3b0y.com/kawaiitikal"><img src="/kawaiitikal/images/kawaiitikal_videos.png"></a></div></div>
<div id="body"><div class="video_l"><h1>Tales of Symphonia 2 (wii)</h1><embed src="http://www.youtube.com/p/1A28FB6CAC771698&hl=en" type="application/x-shockwave-flash" width="300" height="241"></embed></div><div class="video_r"><h1>Rune Factory (wii)</h1><embed src="http://www.youtube.com/p/7871B042BB9889E1&hl=en" type="application/x-shockwave-flash" width="300" height="241"></embed></div></div>
<div id="footer"><div class="matthewmichael">designed by <a href="http://www.matthewmichael.ca">matthewmichael</a></div></div>
I want to change that height to auto.. but everytime i do it doesn't expand.. so i've been having to put a px in... but that get's tedious since i'm going to want to add more content...