Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Help in Web Template Layout

    I am making a template. but the text in the pink colon is not coming only in it,that is it is moving into next div[Shown in image]. please help. do tell why is this happening




    CSS Code
    Code:
    body{
    margin:60px;
    background-image:url('bg.jpg');
    }
    
    #container{
    background-color:#FFFAF0;
    width:100%;
    height:100%;
    }
    
    #header{
    width:100%;
    height:180px;
    background-color:yellow;
    }
    
    
    #innercontainer{
    width:100%;
    height:100%;
    background-color:red;
    }
    
    #leftcol{
    float:left;
    width:200px;
    min-height:100%;
    background-color:green;
    }
    
    #rightcol{
    width:100%;
    min-height:100%;
    background-color:pink;
    
    }
    
    #bottom{
    clear:both;
    width:100%;
    height:100%;
    background-color:blue;
    }


    HTML PAGE:
    Code:
    <html>
    
    
    <head>
    <link rel="stylesheet" type="text/css" href="homepage.css">
    
    
    
    </head>
    
    
    <body>
    <div id="container">
    
    <div id="header">
    
    </div>
    <div id="innercontainer">
    
    <div id="leftcol">
    
    </div>
    
    <div id="rightcol">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    
    </div>
    
    </div>
    
    <div id="bottom">
    
    </div>
    
    
    
    </div>
    
    </body>
    
    
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,715
    Thanks
    25
    Thanked 660 Times in 659 Posts
    If you remove the background-color:blue; from CSS #bottom you will see that the pink div goes a lot futher then what you think it does. You have no height set in any of your divs. So your text causes the div to expand. If your remove some of your <p>text</p> you can watch it shrink.

    Both the #leftcol and #rightcol are in the #innercontainer, set the height of all of them to 550px.
    Code:
    #innercontainer{
    width:100%;
    height:550px;
    background-color:red;
    }
    
    #leftcol{
    float:left;
    width:200px;
    min-height:100%;
    height:550px;
    background-color:green;
    }
    
    #rightcol{
    width:100%;
    min-height:100%;
    height:550px;
    background-color:pink;
    }
    Now add background-color:blue; and put all those <p>'s back. Hey, it's still doing it. OK set overflow
    Code:
    #rightcol{
    width:100%;
    min-height:100%;
    height:550px;
    background-color:pink;
    overflow: auto;
    }
    It could have been hidden and you might want that set in other divs that might over flow.


  •  

    Tags for this Thread

    Posting Permissions

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