Border in a two column layout.

[linton]

I am working on a two-column page layout design and I have a question about adding what I like to think of as a 'flexible border' between the two columns.

Basically, adding a border between the two columns works fine even though I have to reduce the width of one of the divs/boxes to do this successfully. The problem I have is that the border hangs or does not touch the footer depending on the content in the box and the side that the border was created on.

Varying the location of the border based on the content is manageable. Also, I can do away with the border completely but I am wondering if there is a way to create a

'floating border' that will work like a 'floating footer'.

Thanks in advance for all responses. I

[Wickham]

This seems to be a "equal height columns" question.

 

If you have a fixed width for the columns, the "faux columns" method is probably the easiest. You create an image 5px high with the background colors (if any) and the border(s) between the columns and use repeat-y in a containing div to repeat it down both columns. See item 18 here:-

http://www.wickham43.net/firefoxbackground.php#faux-columns

 

OR use position: absolute divs behind your columns as this example:-

http://www.wickham43.net/backgroundsfullheight2colabsolute.html

 

There are other methods for fluid width columns. See Items 16 to 19 in the first link which show other solutions.

Edited January 17, 2012 by Wickham

[linton]

This seems to be a "equal height columns" question.

 

If you have a fixed width for the columns, the "faux columns" method is probably the easiest. You create an image 5px high with the background colors (if any) and the border(s) between the columns and use repeat-y in a containing div to repeat it down both columns. See item 18 here:-

http://www.wickham43.net/firefoxbackground.php#faux-columns

 

OR use position: absolute divs behind your columns as this example:-

http://www.wickham43.net/backgroundsfullheight2colabsolute.html

 

There are other methods for fluid width columns. See Items 16 to 19 in the first link which show other solutions.

 

 

Thanks, will keep it in mind for future practice and use. Seems a little bit confusing now for a newbie like me.