Grow your CSS skills. Land your dream job.

Spacing between two floating lists

  • # February 6, 2013 at 2:59 am

    Hey all,

    today i got some trouble with lists. I have two unordered lists that are floating right in order to be in a row. how do i influence the spacing between them the right way?

    heres a [CodePen](http://codepen.io/anon/pen/uFtyL “”).

    # February 6, 2013 at 3:25 am

    If you want only between them and not between the right side and the last list than you could use this rule:

    ul+ul { margin-left:20px }

    # February 6, 2013 at 4:19 am

    I wan’t to separate only the uls not the lis. as you can see in my CodePen there’s not even a way to define the distance between the two uls. even when i set the ul properties to

    margin-left:0px;

    # February 6, 2013 at 4:28 am

    That huge space between them? That’s the standard padding of lists, so if you set `padding-left: 0;` it disappears, and you can use padding (or margin) to influence the spacing.

    # February 6, 2013 at 4:32 am

    This works like a charm.

    ul+ul { margin-left:20px }

    # February 6, 2013 at 4:46 am

    What Melindrea said works: [CodePen](http://codepen.io/anon/pen/ysLFb “”). Thank you!

    @jozsef & Hugo: could not get it to work with float:right. Maybe you can fork?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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