Link to home
Start Free TrialLog in
Avatar of Neil Thompson
Neil ThompsonFlag for United Kingdom of Great Britain and Northern Ireland

asked on

CSS floats, how can I get these to line up (ie left float up a bit) when the left/right column is bigger thatn its neighbour

I have a list of links which fit together nicely but when some are bigger they obviously increase the min-height of the others and drop the next floated item down.

User generated image
Is there any way I can get any that wrap over and leave a gap to "shift upwards" to keep everything neat? a bit like this...

User generated image
ASKER CERTIFIED SOLUTION
Avatar of Greg Alexander
Greg Alexander
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Or you could just run the items down two independent columns.
Avatar of Brandon Lyon
Brandon Lyon

Depending on your required browser support you can:

Use javascript as the previous poster mentioned
Use  HTML tables
Try some of the new CSS3 features like column layouts : How to use CSS3 columns
According to the developers for the firefox browser, you should NOT use the CSS float as a method to to allow non concerned alignment, you may find that using the  CSS  display:inline-block;  gives a more correct relative positioning, however as all browser output, there will still be alignment PER LINE, the display shown in your second PNG image, does not have a PER LINE alignment, so a two column approach, as galexander07 suggested, might be the way to get that visual display.

Can you show us the HTML and CSS you use for your output, then we can have a better idea of what to do for a better end result.
Avatar of Neil Thompson

ASKER

Thanks all for your comments, this one will suit my needs best :)