SitePoint Sponsor

User Tag List

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

    div not resizing

    Hi I am making a layout with a header on top, a left and right column in the middle and a footer at the bottom. However, I am up to the middle part where the left and right column is and when I resize the window the right column doesn't resize correctly along with the other divs. and at some point I get a horizontal scroll bar, however I need to be exactly the same at an 800x600 minimum. Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head id="Head1" >
    <title>Untitled Page</title>
    <style type="text/css">

    html, body, form{height: 100%; width: 100%; padding: 0; margin: 0;

    background-color: green;}

    #header{width: 100%; height: 50px; background-color: red;}
    ul{list-style: none; display: inline; padding: 0; margin: 0; float: right;}

    #left{float: left; width: 200px; height: 85%; background-color: yellow; padding-right: 84.2%;}

    #float-wrap{width: 100%; height: 100%;}

    #right{width: 84.2%; background-color: Gray; height: 85%; padding: 0; margin: 0;
    float: left; margin-left: -84.2%;}

    #right p{padding: 0; margin: 0;}
    </style>
    </head>
    <body>
    <form id="form1">


    <div id="header">
    <ul><li>asasd</li><li>asdasd</li></ul>
    </div>

    <div id="float-wrap">
    <div id="left">

    asdasdads adadsds

    </div>


    <div id="right">

    <p>dadsads asdasddas asdasdasd</p>

    </div>
    </div>

    </form>

    </body>

    </html>


    Does anybody know what the problem may be?

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •