Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background expansion 1

Status
Not open for further replies.

dmacster

Technical User
Jan 28, 2005
670
US
Okay - feeling rather dumb, but my content is overlapping the wrapper background here
I'm not seeing the problem, but it may be I've looked too long. Please point me, oh generous souls.

Thanks,
Donna
 
Are you using divs, tables, floats?
If you post some code, we might be able to help :)
 
Sure, here's the html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>zone test</title>
<link rel="stylesheet" type="text/css" href="zone.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
	<div id="header">
	  		  	<div id="tagline">Your front porch to northern Baltimore County and western Harford County</div> 
	</div>
	<div id="container">

		<div id="nav"><a href="#">Home</a> <a href="#">Current Issue</a> <a href="#">Photos</a> <a href="#">KidZONE</a> <a href="#">About Us</a> 
	    <a href="#">Advertise</a> <a href="#">Subscribe</a> <a href="#">Contact Us</a></div>

		<div id="content">
			<h1>Welcome</h1>
			<p><img src="images/138Painting.jpg" width="385" height="233" align="left" class="leftImg">Intro text here for the inaugural issue. About the upcoming articles/features.
			  Start-up info and dates for the beginning.Lorem ipsum dolor sit
			  amet, consectetur adipiscing elit. Donec tempus justo ut purus
			  suscipit congue. Cras venenatis gravida elit, eget viverra quam aliquam
			  ut. Praesent
			  ac adipiscing neque. Nunc imperdiet diam vitae dui commodo id eleifend
			  ante ornare. Nunc egestas sagittis enim non posuere. Suspendisse potenti.
			  Suspendisse
			  imperdiet commodo mauris, sed dignissim ipsum luctus sed. Nulla
			  quis neque sit amet nisl fermentum tincidunt in vitae sapien. In condimentum
			  commodo
			  interdum. Phasellus ultricies ipsum a lacus suscipit id faucibus
			  sem pharetra. Duis a adipiscing purus.</p>
			<p>Duis venenatis, eros commodo ornare
			    tincidunt, magna enim aliquam
			    turpis, ut lacinia augue ligula pharetra ligula. Morbi in lacinia
			    ipsum. Phasellus iaculis euismod arcu, eu dignissim odio congue
			  vitae. Cum sociis
			    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
			    mus. Nam feugiat justo ut justo consectetur pretium. Sed orci
			  risus, volutpat vel facilisis molestie, condimentum at purus. Aenean a porta
			  augue.
			    Nunc
			    feugiat urna et arcu congue sed lacinia ante consequat. Maecenas
			    nec diam urna, non dictum neque. Vestibulum vel hendrerit libero.
			  Sed iaculis placerat
			    luctus. Ut mattis fermentum urna vitae vestibulum. Aenean quis
			    mattis lacus. </p>
			<h2>Next headline here</h2>
			<p>More text to fill in this area.  Cum sociis
			    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
			    mus. Nam feugiat justo ut justo consectetur pretium. Sed orci
		  risus, volutpat vel facilisis molestie, condimentum at purus.</p>

		</div>
		
		<div id="sidebar">
			<h1>Sidebar
</h1>
			<p>Advertisers</p>
			<p><img src="images/manwine.jpg" width="150" height="211"></p>
			<p>Calendar Links</p>
			<p>Et cetera</p>

		</div>
	</div>
	<div id="footer">
		FOOTER
	</div>
</div>
</body>
</html>

and here's the css
[code]
body {
	background-color: #000000;
}
	
#wrapper {
	text-align: left;
	margin: 15px auto 0px;
	padding: 0px;
	border:0;
	width: 800px;
	background: url(images/headerBack.gif) repeat-x;
}

#header {
	margin: 0;
	background: url(images/logo.gif) no-repeat;
	height: 165px;
}
#tagline {
	text-align: left;
	font-family: "Goudy Old Style", Times, "Times New Roman", serif;
	font-size: 1.1em;
	font-style: italic;
	color: #FFFFFF;
	left: 175px;
	top: 68px;
	position: relative;
	float: left;
	font-weight: bold;
}	

#container {
	background-color: #f0cc01;
	background-image: url(images/containerBack.gif);
	background-repeat: repeat-y;
	width: 800px;
	height: 100%;
	margin: 0px;
}

#nav {
	background-color: #000000;
	width: 800px;
	height: 20px;
	clear: both;
	position: relative;
	left: 0px;
	top: 5px;
	text-align: left;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	color: #FFFFFF;
}	
#nav a {
	color: #ffffff;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: .9em;
	font-weight: bold;
	padding-right: 10px;
	padding-left: 15px;
}
#nav a:hover {
	color: #f0cc01;
}		
	
	
#content {
	float: left;
	width: 585px;
	background-color: #FFFFFF;
	margin-left: 15px;
}
#content p {
	text-align: left;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 0.9em;
	padding-right: 15px;
	padding-left: 15px;
	line-height: 140%;
	color: #000000;
	padding-bottom: 10px;
}
#content h1 {
	text-align: left;
	font-family: "Goudy Old Style", Times, "Times New Roman", serif;
	font-size: 1.7em;
	padding-left: 15px;
	color: #b5121b;
}
#content h2 {
	text-align: left;
	font-family: "Goudy Old Style", Times, "Times New Roman", serif;
	font-size: 1.3em;
	font-style: italic;
	padding-left: 15px;
}
.leftImg {
	margin-right: 15px;
}				

#sidebar {
	float: left;
	width: 184px;
	background-color: #f9f69d;
	border-left-width: 1px;
	border-left-style: dashed;
	border-left-color: #666666;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 15px;
}
#sidebar p {
	text-align: left;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: .9em;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
#sidebar h1 {
	text-align: left;
	font-family: "Goudy Old Style", Times, "Times New Roman", serif;
	font-size: 1.6em;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	color: #b5121b;
}		

#footer {
	clear: both;
	background: #b5121b;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: .8em;
	color: #FFFFFF;
	text-align: center;
}

No tables.

thanks,
donna
 
How lazy are you? He gave us a link, the source is there, just right click and View Source.


Anyway, add a clear:float tag to the bottom of your container DIV. A <p> tag with a clear:both style should be enough.
And loose the 100% height on your container div. so it can stretch with the content div.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top