SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i stretch news box to content

    Hi All,
    I am trying to get my news box to stretch down as the client adds news items. Also the rest of the page needs to stretch to contain this box as well. I have searched for an answer to this problem but cannot seem to work it out. All help much appreciated.

    HTML

    PHP Code:
    <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8"/>
                    <title>Roberts Bistro</title>
                        <meta name="description" content="">
                    <meta name="keywords" content="">
                <link rel="stylesheet" href="primary.css">        
            </head>
            <body>
                <div id="container">
                <div id="header">
                    <?php
                    
    include("header.php");
                    
    ?>
                    </div>
                    
                    <?php
                        
    include("horiznav.php");
                        
    ?>
                        <div id="facebook"><?php
                        
    include("facebook.php");
                        
    ?></div>
                        <div id="twitter"><?php
                        
    include("twitter.php");
                        
    ?></div>
                    </div>
                    <div id="content">
                    <h1><img src="images/welcome.jpg"></h1>
                    
                    </div>
                    <div id="rightside">
                        <ul class="rightnav">
                            <?php
                            
    include("rightnav.php");
                            
    ?>
                        </ul>
                        <div id="news">
                        <h3>Bistro News</h3>
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi n</p>
                    </div>
                            
                    </div>
                            
                    </div>    
                    <div id="footer">
                    <?php
                    
    include("footer.php");
                    
    ?>
                    </div>
            </body>
        </html>
    CSS

    Code css:
    html{
    background: url(images/background.jpg) no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    }
    h1 {
    position:relative;
    top:20px;
    left:40px;
    font-family:arial, verdana;
    }
    #container {
    margin:40px auto;
    padding:0 auto;
    width:960px;
    height:960px;
    background:#fff;
    }
    #header {
    width:960px;
    height:120px;
    }
    a {
    outline:none;
    }
    a,img {
    border:none;
    }
    #facebook {
    position:absolute;
    top:210px;
    left:1000px;
    }
    #twitter {
    position:absolute;
    top:210px;
    left:1050px;
    }
    ul {
     
        font-family: Arial, Verdana;
        font-size: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
     
    }
    ul li {
        display: block;
        position: relative;
        float: left;
    	width:192px;
    	}
    li ul {
        display: none;
    }
    ul li a {
        display: block;
        text-decoration: none;
        color: #000000;
    	border-top:1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    	padding: 5px 15px 5px 35px;
        background: #ffffff;
        white-space: nowrap;
    }
    ul li a:hover {
    background: #cccccc;
    }
    li:hover ul {
        display: block;
        position: absolute;
    }
    li:hover li {
        float: none;
        font-size: 11px;
    }
    li:hover a { background: #666; }
    li:hover li a:hover {
        background: #;
    }
    #logo {
    position:absolute;
    top:60px;
    left:180px;
    }
    #content {
    float:left;
    width:730px;
    height:700px;
    background:#fff;
    }
    #rightside {
    width:230px;
    height:700px;
    background:#fff;
    float:left;
    }
    .menu {
    margin:0;
    padding:0;
    padding:5px 0;
    width:192px;
    color:#fff;
    text-align:center;
    background:#ccc;
    }
    .rightnav ul{
    position:relative;
    top:100px;
    right:-20px;
    }
    .rightnav li{
    display:block;
    width:192px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    }
    .rightnav li a{
    border:0;
    margin:0;
     
    }
    #news {
    position:relative;
    top:300px;
    right:-20px;
    width:190px;
    height:auto;
    height:400px;
    border:2px solid #ccc;
    }
    #news h3 {
    margin:0;
    padding:0;
    position:absolute;
    top:5px;
    left:40px;
    }
    #news p {
    position:absolute;
    top:20px;
    padding:0 6px;
    }
    #footer {
    position:absolute;
    top:992px;
    left:850px;
    }
    .copyright{
    color:#fff;
    }
    Last edited by cpradio; Apr 2, 2013 at 03:46. Reason: Added code tags

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,057
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a few things that are inconsitent. For example you use the following on #news:

    height:auto;
    height:400px;

    so basically you set a fixed height on the news box.

    Try to avoid using heights on the divs. Instead use the overflow: hidden property on both the contaner as the news divs! That way they will extend depending on the content inside
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks donboe this has worked to some extent but it is cutting off the bottom or it is not visible.

    CSS

    html{
    background: url(images/background.jpg) no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    }
    h1 {
    position:relative;
    top:20px;
    left:40px;
    font-family:arial, verdana;
    }
    #container {
    margin:40px auto;
    padding:0 auto;
    width:960px;
    overflow:hidden;
    background:#fff;
    }
    #header {
    width:960px;
    height:120px;
    }
    a {
    outline:none;
    }
    a,img {
    border:none;
    }
    #facebook {
    position:absolute;
    top:210px;
    left:1000px;
    }
    #twitter {
    position:absolute;
    top:210px;
    left:1050px;
    }
    ul {

    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;

    }
    ul li {
    display: block;
    position: relative;
    float: left;
    width:192px;
    }
    li ul {
    display: none;
    }
    ul li a {
    display: block;
    text-decoration: none;
    color: #000000;
    border-top:1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding: 5px 15px 5px 35px;
    background: #ffffff;
    white-space: nowrap;
    }
    ul li a:hover {
    background: #cccccc;
    }
    li:hover ul {
    display: block;
    position: absolute;
    }
    li:hover li {
    float: none;
    font-size: 11px;
    }
    li:hover a { background: #666; }
    li:hover li a:hover {
    background: #;
    }
    #logo {
    position:absolute;
    top:60px;
    left:180px;
    }
    #content {
    float:left;
    width:730px;
    overflow:hidden;
    background:#fff;
    }
    #rightside {
    width:230px;
    background:#fff;
    float:left;
    }
    .menu {
    margin:0;
    padding:0;
    padding:5px 0;
    width:192px;
    color:#fff;
    text-align:center;
    background:#ccc;
    }
    .rightnav ul{
    position:relative;
    top:100px;
    right:-20px;
    }
    .rightnav li{
    display:block;
    width:192px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    }
    .rightnav li a{
    border:0;
    margin:0;

    }
    #news {
    position:relative;
    top:120px;
    right:-20px;
    width:190px;
    overflow:hidden;
    border:2px solid #ccc;
    }
    #news h3 {
    margin:0;
    padding-left:40px;
    padding-top:5px;
    }
    #news p {
    padding:0 6px 0 6px;
    }
    #footer {
    position:absolute;
    top:992px;
    left:850px;
    }
    .copyright{
    color:#fff;
    }

  4. #4
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by foshan View Post
    Thanks donboe this has worked to some extent but it is cutting off the bottom or it is not visible.
    Might
    Code:
    overflow: auto;
    do the trick? (From http://css-tricks.com/the-css-overflow-property/)

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,057
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to the site? That makes it easier to see what is going on
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Donboe,

    Sometimes you can't see the wood for the trees and i just coudn't fix the problem so i went back to the beginning and started again. I'm glad to say that i have now sorted out the problem. Many thanks for your help though.


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
  •