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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    simple css problem

    i am trying to lay my page out so that i have a fixed width div on the left. and the right hand div stretches 100%. my code at the moment stretches the page too far and horizontal scrollbars appear. what am i doing wrong please.

    my html:

    <div>
    <div id="body_top1">
    <div id="body_top2"></div>
    </div>
    </div>

    my css:

    #body_top1{
    height:109px;
    background-image:url(../Images/Admin/top1.gif);
    background-repeat:no-repeat;}
    #body_top2{
    left:550px;
    height:109px;
    width:100%;
    position:relative;
    background-image:url(../Images/Admin/top2.gif);
    background-repeat:repeat-x;}

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Wee Bubba,

    does this help...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #body_top1{
        float:left;
        height:109px;
        width:550px;    
        background-image:url(../Images/Admin/top1.gif);
        background-repeat:no-repeat;
     }
    #body_top2{
        margin-left:550px;
        height:109px; 
        background-image:url(../Images/Admin/top2.gif);
        background-repeat:repeat-x;
    }
    </style>
    
    </head>
    <body>
    
    <div>
    
    <div id="body_top1">this div is 550px wide</div>
    <div id="body_top2">this div takes up the rest of the space</div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  • #3
    New Coder
    Join Date
    Feb 2004
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks bro that worked a treat.

    i did try float before but i was using float:right and clear:both.

    nice one.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

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