1px wide bar between DIV's - how?

[larsr]

Hi all,

I'm trying to create a two-column page layout with a gray 1px bar in between, so that it stretches dynamically down the page depending on how much content is displayed.
I wouldn't want to use the old-fashioned way of doing this with tables since I hate tables and am all about DIV's anyway.
At the moment my code is as follows:



<div class="bodywrapper">
<div id="column_left">content in left column</div>
<div id="column_right">content in right column</div>
</div>

and my stylesheet looks like this for the aforementioned id's:



#column_left { float: left; overflow: hidden; width: 220px; padding-right: 10px; }
#column_right { overflow: hidden; border-left: 1px solid #ccc; padding-left: 10px; }

As you can see, there's just two divs and the layout is otherwise perfect but the 1px wide bar only goes down as much as the right column has content.

Now, imagine a situation where, for example, there is only 5 rows of text on the left column and 50 rows of text in the right one, the bar stretches well and all looks swell.
Cool. Now imagine this in reverse - ie. left column has, say, 20 lines of text and and the right one two. The bar isn't stretching down as much as I'd want to and naturally so, because it's in relation to the left column.

Now, I could switch the border declaration from the right column to the left, but should it happen that things would get reversed once again, I'd be in the same situation. The only way I see it working is if I do all this with tables and one, 1px wide TD. I wouldn't like to do that, since as previously said, I hate tables.

I could do a border for both DIV's but depending on which column is longer, the bar would look "broken" halfway.

If I do a third DIV between the left and right column, like so:



<div class="bodywrapper">
<div id="column_left">content in left column</div>
<div id="column_bar"><img src="dot.gif"></div>
<div id="column_right">content in right column</div>
</div>

with CSS as follows:



#column_left { float: left; overflow: hidden; width: 220px; padding-right: 10px; }
#column_bar { float: left; width:1px; height: 100%; background: #ccc }
#column_right { overflow: hidden; padding-left: 10px; }

I do get a 1px wide bar, but also 1px high bar which doesn't go down anywhere.

If I use display:block inside "column_bar" style, my layout screws up.

Does anyone have any clues as to how this might work using plain DIV's and a stylesheet?

[larsr]

Oh, one more thing:

I tried using <img src="dot.gif" height="100%"> but then the dotbar stretches too far down in the page and leaves a lot whitespace in both the left and right column, and I have no idea where it's getting the supposed page height from.

[thresher]

You could cheat and have the 1px line as a repeated background image set to the dive behind the two columns set to repeat-y, so that it expands with the two columns.

[SB65]

You don't need an extra div in the middle. Set a background image on #bodywrapper which includes a 1px vertical line, set to repeat-y. #bodywrapper will expand to include #column_right and #column_left, whichever is the highest, so your line will always extend.

[larsr]

Thank so much so far!!
I needed to float the bodywrapper class to either left or right, after which the pixelbar followed whichever column was longer - just the way I wanted it.

However, the bar is now positioned in the far left where I don't want it to be, but where it logically should be since bodywrapper wraps both the left and right columns inside itself. Now, if I try to position the bodywrapper absolutely to some offset left or right, it naturally moves along.

I may be going on first gear since it's getting late here, but how did you expect the bar to find it's way between the left and right column?

[Scriptet]

Using the HTML in post#1 it would be like the following:



<div class="bodywrapper">
<div id="column_left">content in left column</div>
<div id="column_right">content in right column</div>
</div>



.bodywrapper{ overflow:auto; background:url('grey.png') repeat-y 220px 0; }
#column_left { float: left; overflow: hidden; width: 220px; padding-right: 10px; }
#column_right { overflow: hidden; padding-left: 10px; }

overflow:auto; was added to the .bodywrapper container DIV so that it expands to contain its floats (#column_left and #column_right), because by default the container wouldn't expand because it doesn't really know that the floats are there inside of it. Adding float:left; to .bodywrapper is another method other than adding overflow:auto; which triggers it to expand to contain it's floats which you seem to have found out.

Then the background (http://www.w3schools.com/css/css_background.asp) is set to the .bodywrapper container DIV where grey.png will be the 1x1 grey image and it has been set to repeat down the page only (not across) so it looks like a border, and then positioned 220px across the .bodywrapper so that it has the effect of appearing between the two DIV's, you can alter this value as appropriate. See the link on how to change background properties.

[larsr]

Thanks so much scriptet- that helped and now my columns and pixelbars are working like they should!

And a big hand to everyone else who helped too :-)