SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Width property in div element no working correctly

    Hello, built a simple html/css web site from AllinOne book. Checked code with W3 - fine. The column between left and right does not fill the screen eve though the width property is set to 100%.
    Sample code is as follows:
    #left_side {
    position: relative;
    float: left;
    width: 200px;
    background-color: #52f471;
    right: 200px;
    margin-left: -100%;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    }

    #right_side {
    position: relative;
    float: left;
    width: 200px;
    background-color: #52f471;
    margin-right: -200px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    }

    #content_area {
    position: relative;
    float: left;
    background-color: #ffffff;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    width: 100%;
    }

    div id="wrapper">
    <div id="content_area">CONTENT</div>
    <div id="left_side">LEFT SIDE</div>
    <div id="right_side">RIGHT SIDE</div>
    </div>

    thanks for your help in advance.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    welcome to Sitepoint AoW,

    first off you need to offset the container element so as to accommodate the left column ( we do this by giving it padding-left the same width of the left column. in this case we dont really need position relative, so I took that out ( and left:Xpx; also). I didnt know if you wanted 100% height or not.. if you dont just remove the min-height:100% of off the wrapper and and ignore the body,html rules.

    Code:
    		body, html{height:100%;padding:0; margin: 0;}
    		
    #left_side {
    position: relative;
    float: left;
    width: 200px;
    background-color: #52f471;
    margin-left: -100%;
     margin-bottom: -2000px;
    padding-bottom: 2000px;
    }
    
    #right_side {
    position: relative;
    float: left;
    width: 200px;
    background-color: #52f471;
    margin-right: -200px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    }
    
    #content_area {
    position: relative;
    float: left;
    background-color: #ffffff;
    margin-right: -200px;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    width: 100%;
    }	
    #wrapper{padding-left:200px; overflow: hidden; min-height: 100%}
    hope that helps


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
  •