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 8 of 8
  1. #1
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts

    Prevent Floated Boxes from Jumping Underneath Each Other

    Hey all,

    I've been a bit stumped on how to best achieve this and where to find this info on the web:

    Say you have a fluid layout with a left navigation of 200px floated left and a right content area floated right that occupies the remaining space with width auto. Is there a way to prevent the right-floated content box from jumping underneath the left-floated navigation box in Fx2? (works in IE6 and IE7) I've noticed when I put a 200px margin-left on the content box, it still remains underneath the left float in Fx2, even though there is room above it, and of course since it already works in IE6 and IE7 to begin with, it adds a 200px margin starting from the end of the left float.

    Thanks,

    Shane
    Last edited by TheShaner; 10-23-2007 at 04:32 PM. Reason: Clarified problem

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by TheShaner View Post
    Hey all,

    I've been a bit stumped on how to best achieve this and where to find this info on the web:

    Say you have a fluid layout with a left navigation of 200px floated left and a right content area floated right that occupies the remaining space. Is there a way to prevent the right-floated content box from jumping underneath the left-floated navigation box? I've noticed when I put a 200px margin-left on the content box, it sets a margin 200px from the left-floated nav, rather than the left side of the viewport.

    Thanks,

    Shane
    Which browser?

    http://www.digital-web.com/articles/...gn_101_floats/

    Might help you.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    A link to your page would be helpful.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    I don't have my page up, so i can't link, but the question is something that's easily duplicated.
    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" lang="en">
    <head>
      <title>Test</title>
      <style type="text/css" media="all">
        *
        {
          margin: 0;
          padding: 0;
        }
        div#top
        {
          width: 100%;
          background-color: #fcc;
          color: #000;
        }
        div#container
        {
          background-color: #ccf;
          color: #000;
        }
          div#left
          {
            float: left;
            width: 200px;
            background-color: #ffc;
            color: #000;
          }
          div#right
          {
            float: right;
            width: 100%;
            background-color: #cff;
            color: #000;
          }
        div#footer
        {
          width: 100%;
          background-color: #cfc;
          color: #000;
        }
        .clearing
        {
          clear: both;
          visibility: hidden;
          width: 0;
          height: 0;
          margin: 0;
          padding: 0;
          line-height: 0;
          font-size: 0;
        }
      </style>
    </head>
    <body>
      <div id="top">Top</div>
      <div id="container">
        <div id="left">Left</div>
        <div id="right">Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test</div>
        <div class="clearing">&nbsp;</div>
      </div>
      <div id="footer">Footer</div>
    </body>
    </html>
    My first post is a slightly off in my explanation, so this should further clarify. With the above code, Fx2, IE6, and IE7 all put the right content box underneath the left nav. When I switch the width from 100% to auto on the right content box, IE6 and IE7 will fill out as much of the right side as there is content without sliding underneath the left nav box. However, in Fx2, the right content box still remains underneath the left nav box. If I put a left margin of 200px while the width is on auto, IE6 and IE7 will put 200px from the left nav box while Fx2 will push 200px from the left side of the viewport but again, still remain underneath the left nav box.

    -Shane

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    div#right
          {
            float: right;
            width: 100%;
            background-color: #cff;
            color: #000;
          }
    Edit: remove float and width.
    Then add margin-left:200px; to it.
    Last edited by abduraooft; 10-23-2007 at 04:46 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    I saw your original post about removing width, but that just sets width to auto, which was the other problem. But I didn't even think about removing the float property totally. That works great. Thanks!

    -Shane

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You may notice that IE6 has a 3px gap in between the float and the non-floated element. To find the solution for that read this: http://www.positioniseverything.net/...reepxtest.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Now that you point that out, i do notice it, but luckily pixel precision isn't a must with my layout in this case and can easily be left alone. I will definitely take a look at that link though for future reference.

    -Shane


  •  

    Posting Permissions

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