Jump to content

Left Column background repeat?


bassdog65

Recommended Posts

Right now I am making a basic layout, haven't put any content in it yet, but in this example, I want the background on the left, the DIV "left" to be 100% of the height that the DIV "right" is set to.  I know I have done this before, but I am missing something.

 

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title><?php echo (isset($page_title)) ? $page_title : 'Welcome!'; ?></title>
<style>
body {
background-image: url(images/heartland_bg4.jpg); 
background-repeat:repeat;
}
div#wrapper {
width:900px;
margin:auto;
}
div#innerwrapper {
width:900px;
height:100%;
    background-color:silver; 
overflow:auto;
}
div#left {
width:200px;
float:left;
background-image:url('images/heartland_side.png');
background-repeat:repeat;
}
div#right {
background-color:red;
width:700px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">

	<img src="images/top.png" alt="top" style="display:inline;" />

		<div id="innerwrapper">

			<div id="left">
			<p>Would Be Link #1</p>
			<p>Would Be Link #2</p>
			<p>Would Be Link #3</p>
			<p>Would Be Link #4</p>
			<p>Would Be Link #5</p>
			</div>

			<div id="right">
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			<p>Right</p>
			</div>

		</div>

	<img src="images/bottom.png" alt="bottom" style="display:inline;" />

</div>
</body>
</html>


Link to comment
https://forums.phpfreaks.com/topic/167333-left-column-background-repeat/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.