All geek questions in one place

Two-column right alignment loses horizontal scrollbars

I want a layout with two right-aligned columns. So, I create 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 on the left, the right div on the right and set the correct widths for all three divs:

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

Everything looks as expected ...

No swimming 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 necessary:

Without proper alignment http://img690.imageshack.us/img690/8559/withoutrightalign.png

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

Full HTML document example:

 <!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 right-aligned with a double column without losing horizontal scrollbars?

+4
source share
3 answers

You do not need floats for this. Here is 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; }
+1
source

You can do this with a single row table. I only tested Chrome, but I think it will work everywhere. The trick is to give the leftmost “empty” cell 100% width so that everything else is directed to the right. The table itself is nailed to the left edge, and not to the edge, so when the window is narrow, the content goes to the right, and you get a scroll bar.

 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, the content is beaten to the right, and when the window is narrow, it just disappears from the left edge. Argh.

+1
source

Found an explanation why this is happening :

I do not believe that this can not be done without using javascript. The browser displays the page relative to the upper left corner of this page, so everything located above or to the left of this point 0,0 is effectively off-screen. All overflows occur from the bottom and to the right. Similarly, with the contents inside any element of the block. Therefore, if you have an element located relative to the right side of the page, the width is more than 100%. The part to the left of the 0.0 reference point will simply be off screen

0
source

Source: https://habr.com/ru/post/1300572/

More articles:


All Articles