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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Keeping two div's side by side when resizing page?

    I have a page layed out in two CSS styled divisions, a narrow one (110px wide) on the left that serves as a navbar and a larger content division (690px) adjacent to the right of it. The page functionality and appearance is fine in both Firefox and IE 6, however when the browser window is resized to be narrower than the combined width of these divisions ~(800px) the right div repositions underneath the navbar. Obviously the desired result here is to have the right side division stay put and for the browser to activate horizontal scrolling.

    Here's the relevant source (simplified):

    <head>
    <style type="text/css" media="screen"><!--
    .navboxcont { position:relative; float:left; width:auto}
    .navboxleft { position:relative; float:left; width:110px; top:89px}
    .navboxauto { position:relative; float:left; right:0px; margin-left:0px}
    img { vertical-align: bottom; margin-left: 0}
    --></style>
    </head>
    <body>
    <div class="navboxcont">
    <div class="navboxleft">
    my navbar is here
    </div>
    <div class="navboxauto">
    my right side content is here
    </div>
    </div>
    </body>
    Last edited by ngmhtml; 05-07-2006 at 07:00 PM.

  • #2
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Code:
    <head>
    <style type="text/css" media="screen">
    #navboxcont {
    float:left;
    width:800px;
    }
    #navboxleft {
    float:left;
    width:110px;
    }
    #navboxauto {
    position: absolute;
    left: 120px;
    width: 690px;
    float:right;
    margin-left: 1px;
    
    
    }
    
    img { vertical-align: bottom; margin-left: 0}
    
    </style>
    </head>
    <body>
    <div id"navboxcont">
    <div id="navboxleft">
    my navbar is here
    </div>
    <div id="navboxauto">
    my right side content is here
    </div>
    </div>
    </body>
    try that mate.

    Jon
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Jon!

    Works great now!, I see the key was to set the total table width to a fixed value (800px in this case). I guess that would make sense.

    -Nathan


  •  

    Posting Permissions

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