How do i make overflow on body fit into the body?

HTML & CSS
1

How do i make overflow on body fit into the body? So if i put say a side bar/widget in the body (200px width & to the right), How do i make it so when the main paragraphs are shorter then the widget the widget doesn’t overflow? As of now it is overflowing. Thanks http://www.flickr.com/photos/77176502@N05/6941323052/

2

Sounds like the wrapper/container of those two columns just neds overflow:hidden;

http://www.ryanreese.us/blog/Contain-And-Clear-Floats.php

We can do nothing without code though. It’s likely that that is the answer, although without a link or test code (HTML/CSS) to reproduce, it’s a shot in the dark.

3

Ah, sorry. I keep forgetting to post the code. overflow: hidden; does not work. I also tried that link.
It looks fine when i have content go past the widget, but when its shorter it goes under. (as in screenshot i posted earlier).

HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>plumbing - GreenPlumbing</title>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>
<link href=“gpstyle.css” rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div id=“wrapper”>
<div id=“header”>
<img src=“images/gplogo.png” class=“logo”
width=“540” height=“80”
alt=“BeGreenPlumbing logo”/>
<div id=“tagline”>
Maximum Quality<br/>Minimum Waste<br/>Reasonable Price
</div> <!-- end of tagline div –>
</div> <!-- end of header div –>
<div id=“navmenu”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“contact.html”>Contact Us</a></li>
<li><a href=“testimonies.html”>Testimonies</a></li>
<li><a href=“helpfulinfo.html”>Helpful Info</a></li>
</div> <!-- end of navmenu div –>
<div id=“bodycontent”>
<h2>Home</h2>
<div id=“main”>
<p><h4>Plumbing Services You Can Count On Every Time!</h4></p>

&lt;p&gt;We are a small business that strives to give superb service. We have flat rates on many of our services. We have plumbers with many years in the business. Our rates are very competitive with our competition.&lt;/p&gt;
&lt;p&gt;Whether you have a clogged drain, need a hot water heater or a complete remodeling project, Green Plumbing has got it covered.&lt;/p&gt;
&lt;p&gt;Fair Pricing-Quality Work-Beautiful Results&lt;/p&gt;
&lt;p&gt; We hope that with that first call you will never call another plumber again.&lt;/p&gt;

</div> <!-- end of main div –>
<div id=“widget”>
<p><h3>What You Can Expect From Green Plumbing</h3></p>
<p><h4>100% SATISFACTION GUARANTEE</h4></p>
<p>You’ll never be disappointed with our Service.</p>
<p>We guarantee you’ll be pleased, no matter what it takes.</p>
<p><h4>Prices Quoted In Advance</h4></p>
<p>We’ll give you the price, guarantee the price, and guarantee the work.</p>
<p>That way there are no surprises. That’s the way we do business.</p>
<p><h4>PROFESSIONAL SERVICE</h4></p>
You deserve the comfort and peace of mind that comes with having a professionally maintained system. We use only the finest quality products and the most skilled technicians. When you call Green Plumbing, you can be confident that you will have the most professional people in the plumbing service industry today.</p>
</div> <!-- end of widget div –>
</div> <!-- end of bodycontent div –>
<div id=“footer”>
<p>A good name is rather to be chosen<br/>than great riches. - Proverbs 22:1</p>
<div id=“links”>
<a href= >
Contact
</a><br/>
<a href= >
About Us
</a>
<!-- end of links div –>
<h5>Connect With Us</h5>
<!-- end of footer div –>
</div> <!-- end of wrapper div –>
</body>
</html>

/*
CSS
*/

body {
background: url(images/linebg.png);
}

#bodycontent {
margin: auto;
width: 949px;
position: relative;
top: 50px;
background: #fff;
border-radius: 7px;
box-shadow: 0px 3px 5px #999;
}

#wrapper {
margin: 0 auto;
width: 949px;
}

p {
color: #000;
font-family: Big Caslon, Times, Georgia;
}

h2 {
font-family: Big Caslon, Times, Georgia;
padding: 20px 20px 0px 20px;
}

h3 {
color: #245b7d;
}

h4 {
color: #154D43;
}

/* MENU */

#navmenu {
margin: auto;
}

#navmenu ul {
background: url(images/nav1.png) no-repeat;
overflow: hidden;
float: left;
width: 949px;
position: relative;
}

#navmenu li {
float: left;
list-style-type: none;
}

#navmenu li a {
color: #fff;
text-shadow: #000 -1px 0px;
display: block;
padding: 10px 11px 10px 11px;
position: relative;
text-decoration: none;
font-size: 18px;
position: relative;
right: 40px;
border-right: 1px solid #245b7d;
height: 20px;
}

#navmenu li a:hover {
background: url(images/nav2.png) no-repeat;
text-decoration: none;
}

#navmenu li,#navmenu li a {
border-radius: 7px 0 0 7px;
}

#navmenu li + li, #navmenu li +li a {
border-radius: 0;
}

#navmenu li a:active {
background: url(images/nav3.png) no-repeat;
}

/* ADJUSTMENTS - TAGLINE - WIDGET - MAIN */

.logo {
position: relative;
right: 10px;
}

#tagline {
position: relative;
top: 13px;
float: right;
right: 40px;
font-family: Optima;
font-size: 19px;
}

#widget {
width: 200px;
padding: 0px 10px 0px 10px;
border: 2px solid #C4C4C4;
border-radius: 4px;
background: #F7F7F7 url(images/wh.png);
clear: both;
position: absolute;
top: 20px;
right: 20px;
background-position: top right;
}

#main {
padding: 2px 0px 0px 20px;
width: 650px;
}

/* FOOTER */

#footer {
background: #EBEBEB;
border-radius: 7px;
box-shadow: 0px 3px 5px #999;
padding: 40px 10px 40px 25px;
border: 1px solid #fff;
position: relative;
bottom: -75px;
}

#footer p {
font-family: American Typewriter;
}

#links {
font-family: American Typewriter;
font-size: 15px;
position: relative;
float: right;
left: -390px;
top: -50px;
}

#footer a {
color: #154D43;
font-size: 14px;
}

h5 {
font-size: 17px;
color: #245b7d;
position: relative;
left: 320px;
top: -100px;
}

4

this would be what you want to do:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>plumbing - GreenPlumbing</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<style type="text/css"> 
body {
background: url(images/linebg.png);
}

#bodycontent {
margin: auto;
width: 949px;
position: relative;
top: 50px;
background: #fff;
border-radius: 7px;
box-shadow: 0px 3px 5px #999;
overflow:hidden;
}

#wrapper {
margin: 0 auto;
width: 949px;
}

p {
color: #000;
font-family: Big Caslon, Times, Georgia;
}

h2 {
font-family: Big Caslon, Times, Georgia;
padding: 20px 20px 0px 20px;
}

h3 {
color: #245b7d;
}

h4 {
color: #154D43;
}





/* MENU */






#navmenu {
margin: auto;
}

#navmenu ul {
background: url(images/nav1.png) no-repeat;
overflow: hidden;
float: left;
width: 949px;
position: relative;
}

#navmenu li {
float: left;
list-style-type: none;
}

#navmenu li a {
color: #fff;
text-shadow: #000 -1px 0px;
display: block;
padding: 10px 11px 10px 11px;
position: relative;
text-decoration: none;
font-size: 18px;
position: relative;
right: 40px;
border-right: 1px solid #245b7d;
height: 20px;
}

#navmenu li a:hover {
background: url(images/nav2.png) no-repeat;
text-decoration: none;
}

#navmenu li,#navmenu li a {
border-radius: 7px 0 0 7px;
}

#navmenu li + li, #navmenu li +li a {
border-radius: 0;
}

#navmenu li a:active {
background: url(images/nav3.png) no-repeat;
}





/* ADJUSTMENTS - TAGLINE - WIDGET - MAIN */




.logo {
position: relative;
right: 10px;
}

#tagline {
position: relative;
top: 13px;
float: right;
right: 40px;
font-family: Optima;
font-size: 19px;
}

#widget {
width: 200px;
padding: 0px 10px 0px 10px;
border: 2px solid #C4C4C4;
border-radius: 4px;
background: #F7F7F7 url(images/wh.png);
background-position: top right;
float:right; 
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
}

#main {
padding: 2px 0px 0px 20px;
width: 650px;
float:left;
margin-bottom:20px;
}






/* FOOTER */





#footer {
background: #EBEBEB;
border-radius: 7px;
box-shadow: 0px 3px 5px #999;
padding: 40px 10px 40px 25px;
border: 1px solid #fff;
position: relative;
bottom: -75px;
}

#footer p {
font-family: American Typewriter;
}

#links {
font-family: American Typewriter;
font-size: 15px;
position: relative;
float: right;
left: -390px;
top: -50px;
}

#footer a {
color: #154D43;
font-size: 14px;
}

h5 {
font-size: 17px;
color: #245b7d;
position: relative;
left: 320px;
top: -100px;
} </style></head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/gplogo.png" class="logo"
width="540" height="80"
alt="BeGreenPlumbing logo"/>
<div id="tagline">
Maximum Quality<br/>Minimum Waste<br/>Reasonable Price
</div> <!-- end of tagline div -->
</div> <!-- end of header div -->
<div id="navmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="testimonies.html">Testimonies</a></li>
<li><a href="helpfulinfo.html">Helpful Info</a></li>
</div> <!-- end of navmenu div -->
<div id="bodycontent">
<div id="main">
<h2>Home</h2>
<h4>Plumbing Services You Can Count On Every Time!</h4>
<p>We are a small business that strives to give superb service. We have flat rates on many of our services. We have plumbers with many years in the business. Our rates are very competitive with our competition.</p>
<p>Whether you have a clogged drain, need a hot water heater or a complete remodeling project, Green Plumbing has got it covered.</p>
<p>Fair Pricing-Quality Work-Beautiful Results</p>
<p> We hope that with that first call you will never call another plumber again.</p>
</div> <!-- end of main div -->
<div id="widget">
<h3>What You Can Expect From Green Plumbing</h3>
<h4>100% SATISFACTION GUARANTEE</h4>
<p>You'll never be disappointed with our Service.</p>
<p>We guarantee you'll be pleased, no matter what it takes.</p>
<h4>Prices Quoted In Advance</h4>
<p>We'll give you the price, guarantee the price, and guarantee the work.</p>
<p>That way there are no surprises. That&#8217;s the way we do business.</p>
<h4>PROFESSIONAL SERVICE</h4>
You deserve the comfort and peace of mind that comes with having a professionally maintained system. We use only the finest quality products and the most skilled technicians. When you call Green Plumbing, you can be confident that you will have the most professional people in the plumbing service industry today.</p>
</div> <!-- end of widget div -->
</div> <!-- end of bodycontent div -->
<div id="footer">
<p>A good name is rather to be chosen<br/>than great riches. - Proverbs 22:1</p>
<div id="links">
<a href= >
Contact
</a><br/>
<a href= >
About Us
</a>
<!-- end of links div -->
<h5>Connect With Us</h5>
<!-- end of footer div -->
</div> <!-- end of wrapper div -->
</body>
</html>
  1. IT’S NOT VALID to wrap Hxs within P tags. this was not the cause of your problem, but I fixed it anyway.
  2. You gave AP to #widget, this took it out of the regular flow, thus when you used “overflow” #widget was used inthe calculation of he height of the container. Use float:right and margins instead to position it.
  3. Since Widget comes AFTER in the source code it DROPS. You could rearrange your source order… OR do what I did.
  4. Since #main already had explicit dimensions… I floated it left
  5. I included your H2 within the main container… semantically it makes no difference and its the simplest and most fluid way to do group all the right side.

That’s it… hope that helps.

5

Wow, its working perfectly now. Your a genius, or i’m a moron (probably a mixture of both), anyway thanks so much. This is my second site and my first was very simple. I really appreciate all of your guys help. I may be back here for help :confused: Thanks again. :slight_smile: