Peter Stock Peter Stock - 3 months ago 11
CSS Question

Can I make scroll bar appear for content overflowing browser window to left?

This code makes the browser have a horizontal scroll bar when the content is bigger than the window, overflowing to the right:

<html>
<head>
<style type="text/css">
div.a
{
position: relative;
float: left;
background-color: red;
}
div.b
{
position: absolute;
top: 100%;
left: 100%;
background-color: blue;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="a">
Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
</body>
</html>


scroll bar

But if I make the first div float right and then second positioned left of it, the browser doesn't make a horizontal scroll bar, and the overflowing text can't be viewed.

<html>
<head>
<style type="text/css">
div.a
{
position: relative;
float: right;
background-color: red;
}
div.b
{
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="a">
Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
</body>
</html>


no scroll bar

Can I change this behaviour somehow, to be able to scroll left if the content is bigger than the window, overflowing to the left?

Tested on FF 47, IE 11, Opera 38 - all do the same thing.

If this behaviour can't be changed by html/css, what is the reason browsers choose to do what they currently do? Is there any reason why they couldn't be 'fixed'? Wouldn't the current behaviour also be problematic for sites catering solely for right-to-left languages, which I assume would want to be able to use layouts like this?

Answer

So, using the dir attribute in the right places you can half-do what I wanted. But you can't have your cake and eat it - I wanted to be able to scroll left to see content overflowing left, and also scroll right to see content overflowing right. With or without this dir hack, you still have some unviewable content.

Without dir hack, can't see all of Longtext2

<html>
<head>
<style type="text/css">
div.a
{
    position: relative;
    float: right;
    background-color: red;
}
div.b
{
    position: absolute;
    top: 100%;
    right: 100%;
    background-color: blue;
}
</style>
</head>
<body>
<div>
Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End
</div>
<div class="a">
Text1
<div class="b">
Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End
</div>
</div>
</body>
</html>

Can't see all of Longtext2

With dir hack, can't see all of Longtext1.

<html>
<head>
<style type="text/css">
div.a
{
    position: relative;
    float: right;
    background-color: red;
}
div.b
{
    position: absolute;
    top: 100%;
    right: 100%;
    background-color: blue;
}
</style>
</head>
<body dir="rtl">
<div dir="ltr">
Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End
</div>
<div class="a" dir="ltr">
Text1
<div class="b">
Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End
</div>
</div>
</body>
</html>

Can't see all of Longtext1

So, sadly, it seems that is not currently possible to make current browsers be able to scroll to view both (with scroll bar initial position at document origin, corresponding to slider being somewhere in the middle). As in this mockup:

Mockup

Comments