locked
Mystified by div positioning RRS feed

  • Question

  • I am now to css, but want to use div's for layout instead of tables.  With tables I can:
    <table width="100%"><tr><td width="50%">Left content</td><td width="50%">right content</td></tr></table>
    and be assured that the Left content and right content columns will always be the same.

    In CSS I have:
    <div id="contentpanel">
     <div id="leftpanel">
     </div>
     <div id="rightpanel">
     </div>
     <div id="clear"></div>
    </div>

    with my styles defined as:
    #rightpanel { width: 50%; ;}
    #leftpanel { width: 50%; ; float: left;}
    #clear { clear: both; }

    and I don't get consistent left and right panel placement if I resize the browser.  In fact, at 50%, I don't even get them to layout side by side in Expression Web4!  I have to change the widths to 49%!!!

    Can someone explain why 50% widths doesn't work? 
    Can someone explain how to achieve a consistent side by side placement for left and right panels?


    Robotuner

    Sunday, December 2, 2012 7:28 PM

Answers

  • Try giving your right panel a margin-left of 50%. Divs are block elements, and always want to start a new line, and to take 100% of available width. The floated div doesn't alter that when the following div has a default left margin of zero. When you move it over to 50%, it sees that apparently empty space and slides up into it. (Floated content is first positioned, and then removed from page flow, so elements following it in source order are not even aware that they are there.)

    I modified your example slightly to yield this (the color is so that you can see what is what; the content is because empty divs don't display at all):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <style type="text/css">
    #leftpanel {
         width: 50%;
         float: left;
         background-color:yellow;
    }
    #rightpanel {
        width: 50%;
        background-color:aqua;
        margin-left:50%;
    }
    #clear {
        clear: both;
        background-color:gray;
    }
    </style>
    </head>

    <body>
    <div id="contentpanel">
         <div id="leftpanel">
             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
         </div>
         <div id="rightpanel">
             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
         </div>
         <div id="clear">
             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
         </div>
    </div>
    </body>

    </html>

    In my tests, that accomplishes what you appear to want to do. Copy that into a new document and see if that answers your question. Also, you might want to check out Floatutorials for more exercises in using floats. Oh, yeah, and just so you know, design view is really not a reliable view of how your markup will render. Always count on Preview in Browser instead. If you see something funky or unexpected in design view, run a quick preview. If it resolves there, you're good to go.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Sunday, December 2, 2012 8:09 PM
    • Marked as answer by Robotuner Monday, December 3, 2012 1:33 AM
    Sunday, December 2, 2012 8:02 PM

All replies

  • Try giving your right panel a margin-left of 50%. Divs are block elements, and always want to start a new line, and to take 100% of available width. The floated div doesn't alter that when the following div has a default left margin of zero. When you move it over to 50%, it sees that apparently empty space and slides up into it. (Floated content is first positioned, and then removed from page flow, so elements following it in source order are not even aware that they are there.)

    I modified your example slightly to yield this (the color is so that you can see what is what; the content is because empty divs don't display at all):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <style type="text/css">
    #leftpanel {
         width: 50%;
         float: left;
         background-color:yellow;
    }
    #rightpanel {
        width: 50%;
        background-color:aqua;
        margin-left:50%;
    }
    #clear {
        clear: both;
        background-color:gray;
    }
    </style>
    </head>

    <body>
    <div id="contentpanel">
         <div id="leftpanel">
             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
         </div>
         <div id="rightpanel">
             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
         </div>
         <div id="clear">
             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
         </div>
    </div>
    </body>

    </html>

    In my tests, that accomplishes what you appear to want to do. Copy that into a new document and see if that answers your question. Also, you might want to check out Floatutorials for more exercises in using floats. Oh, yeah, and just so you know, design view is really not a reliable view of how your markup will render. Always count on Preview in Browser instead. If you see something funky or unexpected in design view, run a quick preview. If it resolves there, you're good to go.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Sunday, December 2, 2012 8:09 PM
    • Marked as answer by Robotuner Monday, December 3, 2012 1:33 AM
    Sunday, December 2, 2012 8:02 PM
  • Browsers are pretty dumb about space if there is an odd number of pixels in the display you can end up with float drop because of that extra pixel. Using percentage can be more trouble than you would expect.

    What I would do is use the same #leftpanel definition you have and change #rightpanel to simply:

    #rightpanel {margin-left: 50%;}

    That way it will take up whatever width is left over after the 50% is used even it that is really just 49.99%. You only need a width on the column that is floated. If you put margin on the divs that can make it wider as well.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com

    Monday, December 3, 2012 12:49 AM
  • "I don't get consistent left and right panel placement if I resize the browser." "I have to change the widths to 49%!"

    You may have to use 49%.  What is 50% of, for example, 801px?  Round up or round down?  Browsers aren't always smart about it, and if it's "round up" - 50% plus 50% will be larger than the browser window when the width is not an even number, so the divs won't fit side by side.  Take Scott's example and try it in IE8 or IE9 - resizing the window doesn't change it.  Try it in IE7 - watch the right panel jump down, up, down, up as you resize the window and pass through rounding calculations that exceed the window width.  To support IE7 ... switch one of the panels from 50% to 49%.

    Monday, December 3, 2012 1:03 AM
  • Heh, heh... I just came across this in operation, quite by accident. I was checking my fantasy football scores at http://games.espn.go.com/ffl/boxscorequick?leagueId=1018217&teamId=10&scoringPeriodId=13&seasonId=2012&view=scoringperiod&version=quick, and for some reason right-clicked instead of clicking to check a player's projection for this week, and saw the selection for "Inspect element in Firebug." Out of curiosity, I clicked, and saw this:

    <div style="clear:both; width:956px; margin-bottom:10px;">
    <div style="width: 49%; float: left;">
    <div style="width: 49%; float: right;">
    <div style="clear: both;"></div>

    That's the container for the two score tables displayed there. Ordinarily, I wouldn't have thought a thing about it, but the coincidental timing of coming across, tonight, a real-life illustration of this discussion struck me as amusing.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Monday, December 3, 2012 6:23 AM
    Monday, December 3, 2012 3:58 AM
  • the reason why I'm not excited about the 49%/49% solution is that there is 2% in between.  If you stretch the browser to 1200 px, 2% is a 24 pixel gap.

    Robotuner

    Monday, December 3, 2012 4:07 AM
  • True, but with the need to support legacy browsers, and the unfortunate, but nonetheless true, fact that there are variances in rendition between the five major browsers (and several different versions of each) in the wild, we find ourselves having to make these compromises sometimes. It's part of doing Web development, and has been since Netscape was still a factor to deal with.

    And let me tell you, if this bothers you, wait until you get further along in your training and experience, and learn about all of the other quirks, gotchas, and other inconsistencies among browsers, and that's not even counting the different platforms (smartphones, tablets, etc.) that require consideration of responsive design.

    BTW, I don't know of anyone off-hand who designs for or runs a browser at 1200 px, but given standard whitespace considerations, accommodating 24 pixels in that much width shouldn't really be a problem. ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Monday, December 3, 2012 6:21 AM