-1

I have two column divs and I'm applying a big background to the second div, and shifting it with background-position to the left. I'd like it to keep being visible in its entirety and not get hidden under the first div WHILE avoiding to use negative margins or other funny business. Now it gets hidden because of the overflow:hidden of course.. Any ideas?

here's the example http://tinkerbin.com/UqYLFKZG .

Here's the code:

HTML:

<div class="left">
<ul>
  <li>one item</li>
  <li>one item</li>
  <li>one item</li>
  </ul>
</div>
<div class="middle">
<ul>
  <li>one item</li>
  <li>one item</li>
  <li>one item</li>
  </ul>
</div>

CSS

.left {float:left;width:100px;}
.middle {overflow:hidden;background:url("http://farm8.staticflickr.com/7116/8163983721_1ed2414765_b.jpg") no-repeat;background-position:-400px -200px;}

EDIT: a bit surprised by the negative vote; indeed, the question seems too easy to answer because I when I removed overflow:hidden, as the left was not in the normal flow of the document, the content of middle was overlapping with the content of the left.. Therefore I needed to add some left margin or padding to fix this.

George Katsanos
  • 13,524
  • 16
  • 62
  • 98
  • 1
    what do you mean by entirely visible? – Mr. Alien Nov 08 '12 at 16:50
  • I can't get it. IF you remove overflow:hidden, THEN you can see the entire image AND the text from both divs (even if vertically un-aligned)... what do you exactly want to achieve ? – Andrea Ligios Nov 08 '12 at 16:51
  • Indeed, but at the time I posted this I thought removing overflow: hidden would make my middle div lose its positioning (on the right of the left div) which it does (overlapping content etc), but this is fixed by adding some left margin/padding to the middle div.. – George Katsanos Nov 08 '12 at 21:00

1 Answers1

0

The solution is to remove overflow:hidden AND add margin-left or padding left equal to the size of the .left div in order to position .middle correctly.

George Katsanos
  • 13,524
  • 16
  • 62
  • 98