3-column css layout div border problem

[markalroberts]

Hi

I'm using CSS to layout three vertical divs on my template page (+ a
header/footer), using float:left, right and margins.

It works well, but I wish to have a border between the left and middle
div that goes from the header to the footer.

Sometimes the left div will be taller, sometimes the middle one. Is
there a way to get a border to always along the complete height of
whichever of these divs is taller?



Regards,
Mark.

 

[Neredbojias]

With neither quill nor qualm, (e-mail address removed) quothed:

Hi

I'm using CSS to layout three vertical divs on my template page (+ a
header/footer), using float:left, right and margins.

It works well, but I wish to have a border between the left and middle
div that goes from the header to the footer.

Sometimes the left div will be taller, sometimes the middle one. Is
there a way to get a border to always along the complete height of
whichever of these divs is taller?

You could do that using javascript with the usual caveats.

 

[markalroberts]

thanks for the reply - there must surely be a way of doing this without
js ?!?

i mean, if i used tables to lay out my page (shock-horror), I would
simply be able to set the cell border, as the table would extend be as
tall as the content in the left or middle or right columns.

now, with css, I have three independent(ish) divs, so by setting the
middle div's left border it works until the middle div is smaller then
the left div, and vice versa for the left div.

I've notices some people use a container div and tile (repeat-y) a
background on it, which does work. Now, if I could do and offset
border, i might be able to achieve the same.

Also, i'm tempted to use "height: 100%"... but I've not had to use
height yet, and I've had problems with setting the height as a
percentage in the past - is this the solution maybe?


Mark.

 

[Toby Inkster]

Sometimes the left div will be taller, sometimes the middle one. Is
there a way to get a border to always along the complete height of
whichever of these divs is taller?

Yes -- two techniques:

1. Set a left border of the middle column and the right border of the left
column; position them so that the two borders overlap exactly.

2. Include the border as part of the body's background image.

 

[dorayme]

thanks for the reply - there must surely be a way of doing this without
js ?!?

i mean, if i used tables to lay out my page (shock-horror), I would
simply be able to set the cell border, as the table would extend be as
tall as the content in the left or middle or right columns.

now, with css, I have three independent(ish) divs, so by setting the
middle div's left border it works until the middle div is smaller then
the left div, and vice versa for the left div.

I've notices some people use a container div and tile (repeat-y) a
background on it, which does work. Now, if I could do and offset
border, i might be able to achieve the same.

Also, i'm tempted to use "height: 100%"... but I've not had to use
height yet, and I've had problems with setting the height as a
percentage in the past - is this the solution maybe?


Mark.

I confess I got cold feet with a commercial site from tricky
problems of this nature and used a simple three col table to wrap
everything in to get a stability I craved. The css I have seen
for these things, and footer seemed to me excessively tricky ("do
whatever it takes, no matter what, rather than use tables for
layout!") and prone to break under abnormal font sizes, small
screens and/or big resolutions, especially in sites with pics
that do not wrap (now that would be something eh? a wrapping
pic...). It was tempting to avoid tables altogether when
considering browsers that respected things like min-width but I
was very conscious of what a very great deal of people were using
(you can guess...).

Take this as no particular encouragement, I am just a low down,
no good, stinking coward.

But I have a job coming up soon for a disability and aged care
service where I will be gooder: It is not a requirement not to
use tables but I think it would look bad to any knowledgeable
colleague (or opponent). Accessibility. I am planning a two col
site, no tables - to pander to my limitations.

I really had not meant to go on like this. My recent holiday has
over refreshed my fingers...