No replies
mattrd
mattrd's picture
Offline
Regular
Pennsylvania
Last seen: 7 years 3 weeks ago
Pennsylvania
Timezone: GMT-4
Joined: 2007-01-23
Posts: 37
Points: 9

I have a 3 column layout, but I want the center column to stretch and fill the screen if either the left or the right aren't there (or if both aren't there.) How can I achieve this? I know there's a way but i'm stumped. any help would be greatly appreciated. thank you! html and css posted below.

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="header">
		<div id="logo">logo</div> <!-- logo 150x50 //-->
		<div id="ad_space">ad space no.1</div><!-- ad space no.1 468x60 //-->
	</div>
	<div id="left">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
	</div>
	<div id="right">ad banner no.2</div> <!-- ad space 136x400 //-->
	<div id="center">
		<h1>Employment in Philadelphia</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta feugiat lacus. Duis nec tellus non nibh venenatis lobortis. Sed tincidunt, tortor aliquet porttitor accumsan, tortor magna bibendum dui, id scelerisque augue nulla eget purus. Nam quis urna id lacus hendrerit luctus. Aenean nibh erat, aliquam et, mollis id, mollis non, massa. Fusce viverra. Vivamus dignissim laoreet leo. Nulla vehicula enim at lectus. Aliquam semper. Suspendisse imperdiet, odio nec dictum elementum, enim dui placerat ipsum, vel malesuada purus eros quis elit. Mauris aliquet lobortis sem. Etiam facilisis vehicula augue. Suspendisse ullamcorper. In hac habitasse platea dictumst. Duis nulla.</p>
 
		<div class="item_listing"><h2><a href="#">Item Listing</a></h2>
			<p class="date">Wednesday July 25th, 2008</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta feugiat lacus. Duis nec tellus non nibh venenatis lobortis. Sed tincidunt, tortor aliquet porttitor accumsan, tortor magna bibendum dui, id scelerisque augue nulla eget purus. Nam quis urna id lacus hendrerit luctus. Aenean nibh erat, aliquam et, mollis id, mollis non, massa. Fusce viverra. Vivamus dignissim laoreet leo. Nulla vehicula enim at lectus. Aliquam semper. Suspendisse imperdiet, odio nec dictum elementum, enim dui placerat ipsum, vel malesuada purus eros quis elit. Mauris aliquet lobortis sem. Etiam facilisis vehicula augue. Suspendisse ullamcorper. In hac habitasse platea dictumst. Duis nulla.</p>
			<p class="right"><a href="index2.html">read more...</a></p>
		</div>
		<div class="item_listing"><h2><a href="#">Item Listing</a></h2>
			<p class="date">Wednesday July 25th, 2008</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta feugiat lacus. Duis nec tellus non nibh venenatis lobortis. Sed tincidunt, tortor aliquet porttitor accumsan, tortor magna bibendum dui, id scelerisque augue nulla eget purus. Nam quis urna id lacus hendrerit luctus. Aenean nibh erat, aliquam et, mollis id, mollis non, massa. Fusce viverra. Vivamus dignissim laoreet leo. Nulla vehicula enim at lectus. Aliquam semper. Suspendisse imperdiet, odio nec dictum elementum, enim dui placerat ipsum, vel malesuada purus eros quis elit. Mauris aliquet lobortis sem. Etiam facilisis vehicula augue. Suspendisse ullamcorper. In hac habitasse platea dictumst. Duis nulla.</p>
			<p class="right"><a href="index2.html">read more...</a></p>
		</div>
		<div class="item_listing"><h2><a href="#">Item Listing</a></h2>
			<p class="date">Wednesday July 25th, 2008</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta feugiat lacus. Duis nec tellus non nibh venenatis lobortis. Sed tincidunt, tortor aliquet porttitor accumsan, tortor magna bibendum dui, id scelerisque augue nulla eget purus. Nam quis urna id lacus hendrerit luctus. Aenean nibh erat, aliquam et, mollis id, mollis non, massa. Fusce viverra. Vivamus dignissim laoreet leo. Nulla vehicula enim at lectus. Aliquam semper. Suspendisse imperdiet, odio nec dictum elementum, enim dui placerat ipsum, vel malesuada purus eros quis elit. Mauris aliquet lobortis sem. Etiam facilisis vehicula augue. Suspendisse ullamcorper. In hac habitasse platea dictumst. Duis nulla.</p>
			<p class="right"><a href="index2.html">read more...</a></p>
		</div>
	</div>
	<div id="footer"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
		<p>All content on this site may not be copied or reprinted without express permission <a href="http://www.beyond.com" rel="nofollow">www.beyond.com</a> Copyright © 2008.</p>
	</div>
</div>
</body>
</html>

/* CSS Document */
 
* {
	padding:0;
	margin:0;
}
 
body {
	background:#fff;
	font-family:Arial, Helvetica, sans-serif;
}
 
a {
	text-decoration:underline;
	color:#990000;
}
 
#container {
	width:100%;
	height:auto;
}
 
h2 {
	border-bottom:3px solid #990000;
	margin:10px 0;
	font-size:20px;
	letter-spacing:1px;
}
 
#header {
	width:auto;
	height:100px;
	margin:10px;
	background:#fff;
	border:1px solid #000;
}
 
#logo {
	width:150px;
	height:50px;
	float:left;
	margin:20px 0 0 20px;
}
 
#ad_space {
	float:right;
	height:60px;
	width:468px;
	margin:19px 19px 0 0;
}
 
#left {
	width:100px;
	float:left;
	height:300px;
	margin:0 0 0 10px;
	background:#fff;
	padding:18px 0 10px 0;
	text-align:right;
	border:1px solid #000;
}	
 
#left a {
	text-decoration:none;
}
 
#left a:hover, #footer a:hover {
	text-decoration:underline;
}
 
#right {
	width:136px;
	float:right;
	height:400px;
	margin:0pt 10px 0pt 8px;
	background:#fff;
	border:1px solid #000;
	clear:right;
}
 
#center {
	width:auto;
	background:#fff;
	padding:15px;
	font-size:14px;
	margin:10px 156px 10px 120px;
	border:1px solid #000;
}
 
#footer {
	width:auto;
	text-align:center;
	height:auto;
	padding:35px 0;
	margin:0 10px;
	background:#fff;
	font-size:12px;
	clear:both;
	border:1px solid #000;
}
 
p.right {
	text-align:right;
	font-size:13px;
	margin-bottom:10px;
}
 
#left ul li {
	list-style-type:none;
	letter-spacing:1px;
	font-size:11px;
	margin-bottom:5px;
	text-transform:uppercase;
}
 
 
#footer a {
	font-size:12px;
	letter-spacing:6px;
	margin-left:23px;
	margin-right:19px;
	text-decoration:none;
}
 
#footer p {
	margin-top:10px;
}
 
p.date {
	font-size:11px;
	text-tranform:uppercase;
	margin-bottom:5px;
}
 
h1 {
	font-size:25px;
}
 
h2 a {
	text-decoration:none;
}
 
p.right a {
	text-decoration:none;
}
 
#content_detail .item_listing h2 {
	border-bottom:none;
}
 
#content_detail .item_listing p {
	margin-bottom:10px;
}
 
#content_header h1 {
	color:#990000;
}