[Solved] float four links in two columns

[sydnej]

Hi! I am wondering… Is it a better way of making four links to be in two columns? I done something like this:

http://codepen.io/sydnej/pen/GwIju

I am thinking of using floats but without div-wrapper elements on links. And I want it to be adaptive solution (ie. if i want to add more links).

Can anyone help me with this?

[Paulie_D]

It depends on WHY these need to be in two columns…sometimes the correct thing to do is make two separate lists.

However, if you choose to do it as one list, you don’t need the extra classes.

http://codepen.io/Paulie-D/pen/ynlzm

[sydnej]

Ok. That is good idea. But what about cross browsering (in example ie7)? Your idea is good but for ie7 i shall change nth-child to first-child (cos ie doesn’t recognize nth-child) with + corresponding numbers of li.
But i like Your method very much.

Thank You. :)

[Paulie_D]

First child won’t work as it would only apply to the first item.

It would have been helpful that you needed IE 7 support in the original question. As it is, I would still make two separate lists unless there is an absolute reason not to.

[sydnej]

First child will work if i use it this way: http://codepen.io/sydnej/pen/lKvhm

At first i didn’t know of using ie in this. That was second thought. And I wanted it to be in one list. Thank you. You helped me a lot!

Your idea is very good for me in ‘normal’ browsers and mine is one that i will use for example in cross browser mixins for css ie7 style. :)

[Author]

Posts