Venugopal Venugopal - 3 years ago 132
CSS Question

Equal height for parallel list items using CSS

I have this situation click here

according to text length, the buttons height changes. when it does I want its parallel button height made equal to that of first one (not of all buttons but of only its parallel button).

Answer Source

I would approach this in one of two ways - either using jQuery (fiddle - notice that you would need to wrap each button pair in its own ul - if you don't do this the jQuery would be more complicated) or by cheating and dropping in a background image which gives the effect of what you're after - this could be done, again, by wrapping each button pair in its own ul and dropping in a background image containing vertical lines to wrap them - you could then 'cap off' each column by adding starting and finishing li elements with graphical end caps.

I understand that you want to go with CSS only, but I can't think of a way that could be done. There may be something you could do involving careful balancing of max-height, min-height, and height... but I can't think of how that would work at the moment.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download