Home/ Questions/Q 599913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:33:00+00:00

I want a layout with two right-aligned columns. So, I create the three divs

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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