[SOLVED] how to adapt vertical line to height, not to parent element

[Enoteca]

Hi there, on http://www.mondodellabirra.com/shop you can see that I created a vertical line to separate the 3 columns with height 98% of the container (i.e. between header and footer). The problem is that when a column expands (for instance the middle one) the other ones don't follow, as each one sticks to its parent column. I wish to have the vertical lines always 98% of the total page height.

 

I tried with negative margin/padding bottom, I tried body{height:100%;min-height:100%}, I tried with top:0;bottom:0;  or auto, to no avail.

 

Is there a method for having the vertical line automatically adapt to the page, or to the header/body/footer element?

Edited March 12, 2014 by Enoteca (see edit history)

[Enoteca]

I believe it's about going back to the 3-columns liquid layout, so that when one column expands all the vertical lines follow. But how do I implement the layout into Prestahop? btw, the border solution is not what I need.

Edited March 4, 2014 by Enoteca (see edit history)

[Enoteca]

For anyone who will have the same problem, an alternative solution would be hooking the vertical line to the columns and not to the general page, follwing this scheme (all inside header.tpl):

1 line on the right margin of left column + 1 overlapping line on the left margin of center column + 1 line on the right margin of center column + 1 overlapping line on the left margin of right column.

If you don't overlap 2 lines you'd have a problem when one column is less tall than a side column.

 

Probably not the best solution but it works. Anyone needing the CSS you can PM me.  Bye

Edited March 12, 2014 by Enoteca (see edit history)