SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sounds like the wrapper/container of those two columns just neds overflow:hidden;

    http://www.ryanreese.us/blog/Contain...ear-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.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


    <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">
    <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. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    this would be what you want to do:
    Code:
    <!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’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. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :/ Thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •