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...
..but then I float the wrapper div to the right, and neither WebKit nor Firefox display horizontal scrollbars if required:
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?