Re: 3 columns: reposition X for center column visible/invisible
- From: dorayme <doraymeRidThis@xxxxxxxxxxxxxxx>
- Date: Thu, 18 Oct 2007 14:06:16 +1000
In article <slrnfhcvpj.5o8.spamspam@xxxxxxxxxxxxxxxxx>,
Ben C <spamspam@xxxxxxxxx> wrote:
On 2007-10-17, aesdanae <fujifan@xxxxxxxxx> 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.
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/droovies/test/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
.
- Follow-Ups:
- References:
- Prev by Date: Re: Browser mouse pointer location?
- Next by Date: Re: Fonts Appear Larger in IE7
- Previous by thread: Re: 3 columns: reposition X for center column visible/invisible
- Next by thread: Re: 3 columns: reposition X for center column visible/invisible
- Index(es):
Relevant Pages
|
