Is there any way to make a container overflow to the left? - html

Question

Same as the heading, really. I have two divs, each 50% width. An image might end up in either one and if the right image is too wide it simply overflows right. Perfect. But so does the image on the left. Needless to say this messes up the 50/50 appearance of the two divs.
So -- is there any way to force an overflow to the LEFT?
Thanks.
HTML:
<div class="container">
<div class="content_1">
<img>
</div>
<div class="content_1">
<img>
</div>
</div>
CSS:
.container {
width: 100%;
max-width: 1100px;
}
.container > div {
width: 50%;
}
.container_1 {
overflow: left /* I know this doesn't exist... yet */
}

Answer 1

You can use the css property direction:rtl to force the right-to-left behaviour of text which in the context of overflowing an image gives the impression that it is being overflowed to the left.
Basic example:
HTML:
<div class="container">
<div class="image image1"><img src="http://placehold.it/800x300"/></div>
<div class="image image2"><img src="http://placehold.it/800x300"/></div>
</div>
CSS:
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.container {
width:100%;
}
.image {
width:50%;
border:1px solid red;
float:left;
overflow:auto;
}
.image1 {
direction: ltr;
}
.image2 {
direction: rtl;
}
Demonstration: http://jsfiddle.net/n5LyR/1/

Answer 2

You could use direction to show a scrollbar that goes opposite direction or use float:right on content to hide it on the left side
DEMO
HTML
<div class="ovfleft">
<p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
</div>
<div class="hidetoleft">
<p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
</div>
CSS
div {
width:300px;
margin:3px auto;
border:solid;
}
.ovfleft {
direction:rtl;
overflow:auto;
}
p {
width:500px;
direction:ltr;
}
.hidetoleft {
overflow:hidden;
}
.hidetoleft p {
float:right;
}