Question

I need to place two repeated background images on the left and right border of a div. I don’t know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.

This is my layout:
http://jsfiddle.net/WmLhV/

In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break…
Is there any better way of putting an image to the right? even without a float?

Answer 1

Your <div> that’s floated to the right doesn’t have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn’t.

One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.

A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text — standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.