Indenting list items on a two column list

[mboehler3]

Click here for the link in question, you'll have to navigate to the "Payroll Features" tab.On the left side of the list, the list items are indented about 20-25 pixels from the left. On the right side of the list, the list items are not indented. What I'm trying to accomplish is the effect of having the list item intended in relation to the headline. So for example, the first bullet point on the left side, "Real-time payroll preview that helps you avoid time-consuming (and costly) mistakes" is intended in relation to the "Payroll Product" headline. I'm trying to do the same thing on the right side. How can I accomplish this using CSS?Thanks in advance for any help!

[Fmdpa]

There's no link.

[mboehler3]

There's no link.

Sorry about that! Fixed.

[DizzyDan]

I am not sure the best way to fix this but i would make a separate Div for that column. Though i would wait to hear what the real experts have to say about it.

[dsonesuk]

the second column would certainly help, the second column seems to be merged with the first, but you need to zero the padding, and margins for UL and li, then increase margin-left, until the bullets are to required alignment.

[mboehler3]

the second column would certainly help, the second column seems to be merged with the first, but you need to zero the padding, and margins for UL and li, then increase margin-left, until the bullets are to required alignment.

Like this?

<span class="fontsize20"><strong>Technology</strong></span><ul style="margin:0;padding:0;margin-left:15px"><li style="margin:0;padding:0;margin-left:15px">Works on Windows®, Mac® and iPhone®</li></ul>

I've tried that locally and it has no effect.

[dsonesuk]

split ul lists into two div containers, and remove padding and adjust margins similar to below:

<div style="width:50%; float: left;"><span class="fontsize20"><strong>column1</strong></span><ul style="margin:0;padding:0;margin-left:15px"><li style="margin:0;padding:0;margin-left:15px">Works on Windows®, Mac® and iPhone®</li></ul><ul style="margin:0;padding:0;margin-left:15px"><li style="margin:0;padding:0;margin-left:15px">Works on Windows®, Mac® and iPhone®</li></ul><ul style="margin:0;padding:0;margin-left:15px"><li style="margin:0;padding:0;margin-left:15px">Works on Windows®, Mac® and iPhone®</li></ul></div><div style="width:50%; float: right;"><span class="fontsize20"><strong>column 2</strong></span><ul style="margin:0;padding:0;margin-left:15px"><li style="margin:0;padding:0;margin-left:15px">Works on Windows®, Mac® and iPhone®</li></ul><ul style="margin:0;padding:0;margin-left:15px"><li style="margin:0;padding:0;margin-left:15px">Works on Windows®, Mac® and iPhone®</li></ul></div>