[thelist] a vertical line with div/css question!!

[Ian Anderson]

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