[thelist] a vertical line with div/css question!!
Ian Anderson
ian at zstudio.co.uk
Tue Sep 6 14:05:23 CDT 2005
bruce wrote:
>i'm curious as to how i could easily create a vertical line between the
>'left area/right area' of the below diagram.
>
Hi Bruce,
as far as I know, the usual way to achieve this would be to have a
wrapper div around the left and right divs, and apply a background image
to that wrapper.
Something like this, if you're using floats.
<div id="header">heading things</div>
<div id="wrapper">
<div id="left">stuff</div>
<div id="right">other stuff</div>
<div class="clear"><!-- need a comment here to remove vertical space
--></div>
</div>
<div id="footer">stuff at the bottom</div>
#wrapper {
background: url(vertical_tiling_image_with_line.gif) repeat-y;
}
#left {
float: left;
width: 20%;
}
#right {
float: right;
}
.clear {
clear: both;
}
with the floats, remember that to avoid certain CSS bugs in IE, you need
to apply position:relative; and an explicit width or height to all
floated elements. This can be done unobtrusively using something like this:
* html #left, * html #right{
position: relative;
height: 1%;
}
"* html" is a contextual selector that starts from a phantom element
outside the HTML element; to date, only IE has this element, and so good
browsers ignore the rule.
Hope this helps
Cheers
Ian
More information about the thelist
mailing list