Layout

[user4fun]

The layout is a column then a section with a vertical divider line (image) then a nother column. For some reason the image is showing up on top of the "segment"

<div><div class="segment"><h1> Current Events </h1><p>Current Events text.</p></div><div class="v_line">A vertical image here is a divider</div><div class="segment"><h1> Current News</h1><p>Current News text.</p></div></div>

The image is showing up on top of the "Segments" not between them. Here is an image to see what it looks like.CSS CODS

.segment{ float:left; width:200px; height:100%; scroll:auto; padding:10px 10px 25px 0px; margin:auto;}h1{font-family: Verdana; font-style: normal; font-size: 14px; text-decoration: none;color:#FBB917; padding-left:10px;}.v_line{background-image:url('images/divider.png'); background-repeat:repeat-y; height:100%;}

Thank you for any help you can give.

[justinbriggs1]

Rather than using a div element as a divider, you may want to try just using the line background inside the elements that are to be separated. For instance, for .segment, try this:.segment{ background:url('images/divider.png') right repeat-y;float:left; width:200px; height:100%; scroll:auto; padding:10px 10px 25px 0px; margin:auto;}This will display the divider on the far right of the .segment div. That way you don't need extra markup in order to create a nice divider, and it automatically expands to the full height of the element.