4

I want a layout with two right-aligned columns. So, I create the three divs (two columns and a wrapper):

<div id="wrapper">
    <div id="left">
        First column
    </div>
    <div id="right">
        Second column
    </div>
</div>

I float the left div left, right div right, and set the correct widths for all three divs:

#wrapper{
    width:30em;
}
#left{
    float:left;
    width:10em;
}
#right{
    float:right;
    width:20em;
}

This all looks as expected...

Without floating the div http://img690.imageshack.us/img690/5844/rightrightalign.png

..but then I float the wrapper div to the right, and neither WebKit nor Firefox display horizontal scrollbars if required:

Without the right align http://img690.imageshack.us/img690/8559/withoutrightalign.png

The same happens if I use position: absolute; right:0

Full example HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
    <style type="text/css" media="screen">
        #wrapper{
            width:30em;
            float:right; /* The problem line */}
        #left{
            float:left;
            width:10em;
            background: green;}
        #right{
            float:right;
            width:20em;
            background: red;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>
</body>
</html>

Is there a way to get a right-aligned, dual column layout without losing horizontal scroll bars?

1
  • Thhat's weird! I tested it locally on FF on Windows 7. I removed the doctype and added overflow: auto to the body, all to no avail. I'm deleting my answer so the question attracts more attention. Really interested why this is.
    – Pekka
    Feb 8, 2010 at 1:04

3 Answers 3

1

You don't want floats for this. Here's what you are looking for:

   #wrapper{
    width:30em;
    margin-right: 2px;
    margin-left: auto;
   }
   #left{
    float:left;
    width:10em;
    background: green;
   }
   #right{
    float:right;
    width:20em;
    background: red;
   }
0
1

You can do it with a one-row table. I only checked on Chrome, but I think it'll work everywhere. The trick is to give the leftmost "empty" cell a 100% width, to pressure everything else to the right. The table itself is nailed to the left edge, not right edge, so when the window is narrow, content is pushed to the right, and you get a scrollbar.

stuff before the columns
<table style="width:100%" border=1><tr>
<td style="width:100%">(empty)
<td valign=top><div style="width:10em">left</div>
<td valign=top><div style="width:20em">right right right right right right right right right right right right right right right </div>
</table>
stuff after the columns

With float:right, or position:absolute with right:0, content is nailed to the right, and when the window is narrow, it just vanishes off the left edge. Argh.

1
  • While this is possible, you should not use table formatting for "non-table" page layout. The snapshot clearly shows nav and content panes, divs are the best way to go here. Table syntax should strictly be used for tables.
    – 08Hawkeye
    Aug 19, 2010 at 18:20
0

Found an explanation of why this is happening:

I don't believe there is any way around this without using javascript. The browser renders a page relative to the top-left corner of that page, so anything positioned above or to the left of that 0,0 point is effectively off-screen. All overflow happens to the bottom and the right. It's the same way with content inside of any block element. So if you have an item positioned relative to the right side of the page, wider than 100% width. The part to the left of the 0,0 origin point will simply be offscreen

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.