Hey folks. This one has been driving me mad so any pointers would be great.
The site I'm working on has a number of the pages elements held within a container block using CSS so the layout of the elements is fluid with the browser size. Now, for this the containers height is relative to size of the content and therefor has no height setting:
.container
{position:relative; margin-top:250px; background:#0033FF;}
But I want to have a fancy border down the side which is simply set using the following css within the .container div:
img.border_left
{float:left; width:15px; height:100%;}
However, I've found that as the container itself has no defined height, the height of the image will not resize to 100%. I've messed about with it and found that by setting a height of the container, the border image resizes no bother, but that obviously effects the container resizing to fit the content.
Anyone know how to get around this?
The site I'm working on has a number of the pages elements held within a container block using CSS so the layout of the elements is fluid with the browser size. Now, for this the containers height is relative to size of the content and therefor has no height setting:
.container
{position:relative; margin-top:250px; background:#0033FF;}
But I want to have a fancy border down the side which is simply set using the following css within the .container div:
img.border_left
{float:left; width:15px; height:100%;}
However, I've found that as the container itself has no defined height, the height of the image will not resize to 100%. I've messed about with it and found that by setting a height of the container, the border image resizes no bother, but that obviously effects the container resizing to fit the content.
Anyone know how to get around this?