OregonTrail
07-27-2009, 05:05 AM
Hi! This is my first time hand-coding a page using CSS, and I'm having trouble getting a background image in one of my divs to stretch beyond the content.
I basically have a two column layout within some other divs, and I want the vertically repeating background of my left column to stretch to the bottom of the page, matching the right column. I have gotten it to work by setting a margin in the right div that "overlaps" the left div, which for some reason makes the background of the left div stretch downwards, but then the right div is positions below the left div rather than directly to the right of it. Since this is my first time coding CSS, I'm just going to dump all my code here for you guys to take a look at.
<!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>Beijing Acupuncture</title>
<style type="text/css">
.headwrap {
background: url('real_images/Layout_02.jpg') repeat-x top;
width: 100%;
}
html{
}
body {
background-image:url('real_images/Layout_35.jpg');
background-position:bottom;
background-color:#cbcf9d;
background-repeat:repeat-x;
width: 100%;
min-width:100px;
margin: 0;
padding: 0;
text-align: center;
}
#container {
width: 828px;
margin: 0 auto 0 auto;
text-align: left;
}
#content{
}
#header {
padding-bottom: 181px;
background: #FFF url('real_images/header.jpg') repeat-y top;
}
#left {
position: relative;
width: 178px;
padding-left: 13px;
padding-right: 13px;
background: #987349 url('real_images/lstripe.jpg') repeat-y right;
background-position: 100% 15px;
float: left;
z-index: 0;
}
#main {
width: 591px;
margin: 0 0 0 0;
padding-right: 23px;
padding-left: 10px;
padding-top: 10px;
background: #FFF url('real_images/rstripe.jpg') repeat-y right;
float: left;
}
#banner {
width: 624px;
padding-bottom: 96px;
background: #987349;
background: url('real_images/blankbanner.jpg');
float: right;
}
</style>
</head>
<body>
<div class="headwrap">
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left"><img src="real_images/test.jpg" alt="test" /></div>
<div id="banner"></div>
<div id="main">
<div id="lipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis lectus quis dolor bibendum sed cursus enim scelerisque. Vivamus adipiscing, ligula elementum faucibus euismod, turpis nisl pharetra arcu, vitae gravida urna libero quis elit. Vivamus vel urna lectus. Aenean in sem orci. Nulla interdum, ante ac cursus tristique, libero lacus viverra nisi, quis lobortis tellus dolor eget urna. Aenean tincidunt nulla in arcu egestas cursus. Etiam congue quam ipsum, vel malesuada nisl. Sed tristique quam convallis leo laoreet ac porta odio volutpat. Donec vehicula varius pulvinar. Donec hendrerit aliquet urna sed aliquet. Etiam sagittis euismod fringilla. Praesent auctor est in metus lobortis non convallis tortor laoreet. In ornare posuere tortor vitae ultrices.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut elit sed tellus euismod ornare non a lorem. Duis pellentesque purus orci. Praesent bibendum laoreet eros, sed molestie neque aliquam eu. Vestibulum vel augue elit. Suspendisse posuere lorem id felis condimentum laoreet. Sed rutrum facilisis leo, vitae vestibulum risus laoreet eget. Curabitur molestie ipsum in turpis eleifend sed laoreet leo pulvinar. Aenean ut quam metus, a eleifend nisl. Nulla adipiscing neque ut lacus consectetur sit amet imperdiet nunc accumsan. Phasellus porta, mauris sodales volutpat convallis, augue neque blandit nibh, a euismod purus nisi vitae sapien. Cras laoreet magna vel lorem interdum quis ultrices orci ornare. Quisque est felis, aliquet sed molestie et, suscipit sit amet urna. Morbi et tortor adipiscing nunc accumsan faucibus et eget quam. </p>
<p>Sed facilisis tempor augue id scelerisque. Integer suscipit interdum ante, eu bibendum leo congue vel. Sed euismod, ligula eget venenatis tempor, enim felis auctor erat, quis vulputate nisi urna ac dolor. Nulla a volutpat justo. Integer quam est, blandit facilisis euismod eu, adipiscing id ipsum. Mauris lobortis aliquam cursus. Fusce id ullamcorper neque. Sed sed accumsan augue. Nunc risus libero, suscipit eu condimentum nec, adipiscing nec risus. Phasellus consequat, nisl a tincidunt ultrices, enim velit semper purus, sed dignissim risus metus at massa. Curabitur quis mi dolor. Duis non diam id orci commodo tincidunt sit amet non massa. Pellentesque a diam eu turpis laoreet egestas. Sed condimentum ante quis lectus bibendum sit amet posuere ante lacinia. Sed aliquam odio vitae ante rhoncus dignissim. Morbi lacus tortor, dignissim eu consequat et, bibendum dignissim nulla. </p>
<p>Ut lacus nunc, ornare eget convallis sed, mattis at ante. Phasellus tempor egestas velit non tincidunt. Curabitur fringilla sapien sed turpis molestie porta. Mauris quam quam, gravida iaculis dignissim eget, eleifend quis ante. Quisque metus dui, interdum non interdum sit amet, hendrerit ac nisl. Mauris non tincidunt eros. Aenean nec enim nec metus consequat adipiscing non ac purus. Donec ut quam ipsum, eu eleifend ante. Mauris lobortis pharetra vulputate. Vestibulum sapien ligula, iaculis ut cursus at, vestibulum non mauris. Integer non eros orci. Etiam vel dolor sit amet dolor tincidunt tempor vel at mi. In mollis condimentum nisi, nec viverra tortor laoreet a. </p>
<p>Morbi neque nulla, posuere a gravida sit amet, dictum non lacus. Suspendisse egestas ipsum a felis commodo eu scelerisque lectus hendrerit. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent consequat arcu vitae urna tempor eu consectetur leo commodo. Nullam varius leo vel sem eleifend sit amet pellentesque ligula vulputate. Maecenas eleifend, justo sit amet commodo consectetur, leo felis lobortis sapien, sit amet vulputate velit nisi quis lectus. Cras metus urna, elementum at hendrerit sit amet, pharetra vel risus. Aliquam mattis luctus vehicula. Vestibulum nec quam quam, vel tristique turpis. Donec mi felis, facilisis at tempor sed, aliquet quis sem. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisis risus blandit elit vestibulum elementum. Mauris eget mauris lorem, sit amet gravida turpis. </p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
I basically have a two column layout within some other divs, and I want the vertically repeating background of my left column to stretch to the bottom of the page, matching the right column. I have gotten it to work by setting a margin in the right div that "overlaps" the left div, which for some reason makes the background of the left div stretch downwards, but then the right div is positions below the left div rather than directly to the right of it. Since this is my first time coding CSS, I'm just going to dump all my code here for you guys to take a look at.
<!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>Beijing Acupuncture</title>
<style type="text/css">
.headwrap {
background: url('real_images/Layout_02.jpg') repeat-x top;
width: 100%;
}
html{
}
body {
background-image:url('real_images/Layout_35.jpg');
background-position:bottom;
background-color:#cbcf9d;
background-repeat:repeat-x;
width: 100%;
min-width:100px;
margin: 0;
padding: 0;
text-align: center;
}
#container {
width: 828px;
margin: 0 auto 0 auto;
text-align: left;
}
#content{
}
#header {
padding-bottom: 181px;
background: #FFF url('real_images/header.jpg') repeat-y top;
}
#left {
position: relative;
width: 178px;
padding-left: 13px;
padding-right: 13px;
background: #987349 url('real_images/lstripe.jpg') repeat-y right;
background-position: 100% 15px;
float: left;
z-index: 0;
}
#main {
width: 591px;
margin: 0 0 0 0;
padding-right: 23px;
padding-left: 10px;
padding-top: 10px;
background: #FFF url('real_images/rstripe.jpg') repeat-y right;
float: left;
}
#banner {
width: 624px;
padding-bottom: 96px;
background: #987349;
background: url('real_images/blankbanner.jpg');
float: right;
}
</style>
</head>
<body>
<div class="headwrap">
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left"><img src="real_images/test.jpg" alt="test" /></div>
<div id="banner"></div>
<div id="main">
<div id="lipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis lectus quis dolor bibendum sed cursus enim scelerisque. Vivamus adipiscing, ligula elementum faucibus euismod, turpis nisl pharetra arcu, vitae gravida urna libero quis elit. Vivamus vel urna lectus. Aenean in sem orci. Nulla interdum, ante ac cursus tristique, libero lacus viverra nisi, quis lobortis tellus dolor eget urna. Aenean tincidunt nulla in arcu egestas cursus. Etiam congue quam ipsum, vel malesuada nisl. Sed tristique quam convallis leo laoreet ac porta odio volutpat. Donec vehicula varius pulvinar. Donec hendrerit aliquet urna sed aliquet. Etiam sagittis euismod fringilla. Praesent auctor est in metus lobortis non convallis tortor laoreet. In ornare posuere tortor vitae ultrices.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut elit sed tellus euismod ornare non a lorem. Duis pellentesque purus orci. Praesent bibendum laoreet eros, sed molestie neque aliquam eu. Vestibulum vel augue elit. Suspendisse posuere lorem id felis condimentum laoreet. Sed rutrum facilisis leo, vitae vestibulum risus laoreet eget. Curabitur molestie ipsum in turpis eleifend sed laoreet leo pulvinar. Aenean ut quam metus, a eleifend nisl. Nulla adipiscing neque ut lacus consectetur sit amet imperdiet nunc accumsan. Phasellus porta, mauris sodales volutpat convallis, augue neque blandit nibh, a euismod purus nisi vitae sapien. Cras laoreet magna vel lorem interdum quis ultrices orci ornare. Quisque est felis, aliquet sed molestie et, suscipit sit amet urna. Morbi et tortor adipiscing nunc accumsan faucibus et eget quam. </p>
<p>Sed facilisis tempor augue id scelerisque. Integer suscipit interdum ante, eu bibendum leo congue vel. Sed euismod, ligula eget venenatis tempor, enim felis auctor erat, quis vulputate nisi urna ac dolor. Nulla a volutpat justo. Integer quam est, blandit facilisis euismod eu, adipiscing id ipsum. Mauris lobortis aliquam cursus. Fusce id ullamcorper neque. Sed sed accumsan augue. Nunc risus libero, suscipit eu condimentum nec, adipiscing nec risus. Phasellus consequat, nisl a tincidunt ultrices, enim velit semper purus, sed dignissim risus metus at massa. Curabitur quis mi dolor. Duis non diam id orci commodo tincidunt sit amet non massa. Pellentesque a diam eu turpis laoreet egestas. Sed condimentum ante quis lectus bibendum sit amet posuere ante lacinia. Sed aliquam odio vitae ante rhoncus dignissim. Morbi lacus tortor, dignissim eu consequat et, bibendum dignissim nulla. </p>
<p>Ut lacus nunc, ornare eget convallis sed, mattis at ante. Phasellus tempor egestas velit non tincidunt. Curabitur fringilla sapien sed turpis molestie porta. Mauris quam quam, gravida iaculis dignissim eget, eleifend quis ante. Quisque metus dui, interdum non interdum sit amet, hendrerit ac nisl. Mauris non tincidunt eros. Aenean nec enim nec metus consequat adipiscing non ac purus. Donec ut quam ipsum, eu eleifend ante. Mauris lobortis pharetra vulputate. Vestibulum sapien ligula, iaculis ut cursus at, vestibulum non mauris. Integer non eros orci. Etiam vel dolor sit amet dolor tincidunt tempor vel at mi. In mollis condimentum nisi, nec viverra tortor laoreet a. </p>
<p>Morbi neque nulla, posuere a gravida sit amet, dictum non lacus. Suspendisse egestas ipsum a felis commodo eu scelerisque lectus hendrerit. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent consequat arcu vitae urna tempor eu consectetur leo commodo. Nullam varius leo vel sem eleifend sit amet pellentesque ligula vulputate. Maecenas eleifend, justo sit amet commodo consectetur, leo felis lobortis sapien, sit amet vulputate velit nisi quis lectus. Cras metus urna, elementum at hendrerit sit amet, pharetra vel risus. Aliquam mattis luctus vehicula. Vestibulum nec quam quam, vel tristique turpis. Donec mi felis, facilisis at tempor sed, aliquet quis sem. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisis risus blandit elit vestibulum elementum. Mauris eget mauris lorem, sit amet gravida turpis. </p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>