Stylesheets - 3 columns: reposition X for center column visible/invisible

Author

3 columns: reposition X for center column visible/invisible

aesdanae

2007-10-17, 6:17 pm

I'm trying to make a 3-column list of equal height with a solid line
in between each, but of which the left and right columns will re-
center themselves when the center column is hidden. Wondered if anyone
could help me, or make another recommendation. Maybe I shouldn't be
trying to do this with separate divs? Could I use lists instead (and
if so how do I get the vertical line)? In any case, it must have the
border line in between each and it must re-center depending on the
visibility options.

This is how far I've gotten; I'm stuck on the re-centering issue:

<div style="position:relative; width:600px; height:200px;">


<div style="position:absolute; left:0; top:0; height:100%; width:
200px; border-right: 1px solid;">
<a>List Item</a><br />
<a>List Item</a><br />
<a>List Item</a><br />
</cfif>
</cfif>
</div>


<div id="User2" style="position:absolute; left:auto; top:0; height:
100%; width:200px; border-right: 1px solid;">
<a>List Item</a><br />
<a>List Item</a><br />
<a>List Item</a><br />
</div>


<div style="position:absolute; left:auto; top:0; height:100%; width:
200px;">
<a>List Item</a><br />
<a>List Item</a><br />
<a>List Item</a><br />
</div>
</div>

Please let me know if you have any pointers... Thanks!

Ben C

2007-10-17, 6:17 pm

On 2007-10-17, aesdanae <fujifan@XXXXXXXXXX> wrote:
> I'm trying to make a 3-column list of equal height with a solid line
> in between each, but of which the left and right columns will re-
> center themselves when the center column is hidden. Wondered if anyone
> could help me, or make another recommendation. Maybe I shouldn't be
> trying to do this with separate divs? Could I use lists instead (and
> if so how do I get the vertical line)?

If by lists you mean <ul> and <li> then yes of course-- you can use
those instead of divs and just style them.

So long as the HTML is valid, it doesn't matter (with one or two
exceptions) what tags you use from the point of view of display, since
you can re-style it all with CSS.

> In any case, it must have the border line in between each and it must
> re-center depending on the visibility options.

Better to make each column a float than absolutely positioned. Since
you're setting the width on everything in pixels, this is quite easy.

Make the container "width: 602px; margin-left: auto; margin-right:
auto". That centres it.

Then for each of the columns inside, change "position: absolute; left:
0; top: 0" to just "float: left".

When you want to remove the middle column, set it to display: none, and
change the width of the container to 201px.

It's a bit annoying that you have to work out the width of the container
yourself-- which don't forget is the total _outer margin width_ of the
floats, so you have to count their borders as well as their widths-- but
the only way to centre a shrink-to-fit block-level container is with
display: table, which has other drawbacks in this case, besides not
working in IE.

Of course display: inline-block as usual would be perfect here and solve
all your problems, but it isn't widely supported.

You may have problems with IE putting 3px gaps in all over the place,
and/or other problems with IE. Good luck finding the hacks.

dorayme

2007-10-18, 3:21 am

In article <slrnfhcvpj.5o8.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:

> On 2007-10-17, aesdanae <fujifan@XXXXXXXXXX> wrote:
>
> If by lists you mean <ul> and <li> then yes of course-- you can use
> those instead of divs and just style them.
>
> So long as the HTML is valid, it doesn't matter (with one or two
> exceptions) what tags you use from the point of view of display, since
> you can re-style it all with CSS.
>
>
> Better to make each column a float than absolutely positioned. Since
> you're setting the width on everything in pixels, this is quite easy.
>
> Make the container "width: 602px; margin-left: auto; margin-right:
> auto". That centres it.
>
> Then for each of the columns inside, change "position: absolute; left:
> 0; top: 0" to just "float: left".
>
> When you want to remove the middle column, set it to display: none, and
> change the width of the container to 201px.
>
> It's a bit annoying that you have to work out the width of the container
> yourself-- which don't forget is the total _outer margin width_ of the
> floats, so you have to count their borders as well as their widths-- but
> the only way to centre a shrink-to-fit block-level container is with
> display: table, which has other drawbacks in this case, besides not
> working in IE.
>
> Of course display: inline-block as usual would be perfect here and solve
> all your problems, but it isn't widely supported.
>
> You may have problems with IE putting 3px gaps in all over the place,
> and/or other problems with IE. Good luck finding the hacks.

Also good luck in fitting in the list markers if you want them.
See here for a tip on this, it might help, notice the

li {margin-left: 2em;}

(Don't do this in px, it will be awful when text size changes)

OP can play about with these values. If you do not colour in the
bg of the div or border it, then you can reduce the margin %s of
the <ul>s to cope with IE adding at least 6 px for the joining
floats. He can play with pixels if he wants but I suggest % is
easier...

<http://members.optushome.com.au/dro...t/threeULs.html>

Also, OP might note that the text will break out of their
containers when boxes are sized in pixels like this... so good
luck on this too.

--
dorayme

Ben C

2007-10-18, 6:16 am

On 2007-10-18, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <slrnfhcvpj.5o8.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
[...]
> Also good luck in fitting in the list markers if you want them.
> See here for a tip on this, it might help, notice the
>
> li {margin-left: 2em;}
>
> (Don't do this in px, it will be awful when text size changes)
>
> OP can play about with these values. If you do not colour in the
> bg of the div or border it, then you can reduce the margin %s of
> the <ul>s to cope with IE adding at least 6 px for the joining
> floats. He can play with pixels if he wants but I suggest % is
> easier...
>
><http://members.optushome.com.au/dro...t/threeULs.html>

You make each <ul> 33% of the container. It's only the fact that 33% is
a little bit less than 1/3 that means you get away with it and there's
enough room for the 1px border.

Sort of OK I suppose but rather thin ice to be skating on.

The general way to fix this is to have each column contain a wrapper div
with strictly no border, padding or margins at all, give it 33% width,
and then put the <ul>s inside the wrappers. Then you can set borders on
the divs.

The other advantage to these wrappers is that the <ul>s can keep their
usual left margins (or padding, depends on the browser) which is what
normally makes room for the list-item markers.

The downside is having to pretend the wrappers mean something and aren't
just there for layout.

> Also, OP might note that the text will break out of their
> containers when boxes are sized in pixels like this... so good
> luck on this too.

Using percentages is half-way to fixing that. All you then have to do is
set the outer container to a width in ems rather than in px.

Then the ice gets even thinner because 33% of some number of ems plus 1
pixel might round differently depending on font-size (and not just on
how the browser does its fractional arithmetic).

dorayme

2007-10-18, 6:19 pm

In article <slrnfhec16.5ns.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:

> On 2007-10-18, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> [...]
>
> You make each <ul> 33% of the container. It's only the fact that 33% is
> a little bit less than 1/3 that means you get away with it and there's
> enough room for the 1px border.
>
> Sort of OK I suppose but rather thin ice to be skating on.
>

I agree with much of what you go on to say... but I was not quite
meaning to stand by the 33% figure as gospel, 31 or 32 might make
the ice thicker - especially for IE. Notice that OP's container
is fixed at 600px.

I think a lot depends on what the OP is really wanting in
context. Perhaps adding those containers you mention is the go or
the simpler scheme I suggested might well do if other things on
the page do not require such exactness?

--
dorayme