Grow your CSS skills. Land your dream job.

li adding unecessary space

  • # January 28, 2013 at 11:28 pm

    Is there a workaround? Should I perhaps make two separate Divs and have a separate list for each? Those dimensions are important :(

    Edit: unfortunately, it seems to not work.

    # January 29, 2013 at 1:15 am

    The fact is that you have a couple of extraordinarily long list items there that just aren’t going to fit inside the div you want unless a very small font-size is used.

    # January 29, 2013 at 8:36 am

    @Gingerbread, would [This…](http://cdpn.io/GEmIt “”) work for you?

    # January 29, 2013 at 8:53 am

    @Gingerbread, [Here’s a pen](http://codepen.io/wolfcry911/full/mqtiL “”) showing different techniques. In each case I used the dimensions you gave above. The font-size used is going to vary depending on the font you specify (I left default san-serif).

    The first is just a replica of your image. The reason for the spaces is that a float will not render higher than a previous float – so the long list items are creating the spaces.

    The second shows two lists with an equal number of list items. But because the li are of different length, you’ll wind up with different length lists. This assumes that the lists are dynamic – if you’re hard coding them, you could alter the number of items each list has.

    The third is a simple single full width list – might be the best option. It would need a slightly smaller font-size to fit everything however.

    Note that in the future, or now if you want to use browser prefixes, you could use css columns to achieve your orginal desired look. The fourth example shows this (with prefixes)

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".