Question

I have a list that looks like this

--------------------
|        |         |
|   1    |    2    |
|        |         |
|   3    |    4    |
|        |         |
|   5    |    6    |
|        |         |
--------------------

(it’s a simple <ul> with <li>‘s)

the container of this list, let’s call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.

How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can’t add any classes to these list items 🙁

I tried with margin-right: 10px on the <li>‘s and margin-right: -10px on the <ul> but that doesn’t work 🙂

Answer 1

An example with margin-right.

edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/

Not terribly elegant, but simple enough.