How do you put two bulleted lists next to each other?

[bryhal]

I've messed with the code a few different ways, but can't get the two bulleted lists next to each other. I'm sure there is an easy way to do it, but I have not come up with it. Any suggestions?

[studmuffin51306]

<table><tr><td><ul><li>apples</li><li>oranges</li></ul></td><td><ul><li>apples</li><li>oranges</li></ul></td></tr></table>

[vchris]

Sure that table will work but you can do this with css as well. I did this in previous project using floats. Both lists should be floated left or right depending where you want them and use margin/padding.

[crud3w4re]

CSS? Wouldn't it only be good with CSS if you wanted to create it multiple times? Or in different pages? Maybe I have the wrong idea about CSS.

<table border="1"><tr><td><ul><li>apples</li><li>oranges</li></ul></td><td><ul><li>apples</li><li>oranges</li></ul></td></tr></table>

Adding

<table border="1">

makes it look more interesting, IMO.

[Skemcin]

<div style="float:left;"><ul><li>apples</li><li>oranges</li></ul></div><div style="float:left;"><ul><li>apples</li><li>oranges</li></ul></div>

[crud3w4re]

Nice. I guess there's more than one way to do the same thing.

[aspnetguy]

you may or may not have to add a width to those floating divs, I think either IE or Firefox dosen't display right without it.

[Skemcin]

Firefox will wrap the second div if there is enough text to make both lists not fit the width of the viewable screen. So, as aspnetguy points out, you will have to define a wdith like this:

<div style="float:left; width:50%;"><ul><li>Proin ut justo sed nunc condimentum aliquet.</li><li>Sed rhoncus lacus eget ipsum hendrerit egestas.</li><li>In vitae metus ut ante porta consectetuer.</li><li>Morbi consequat consectetuer massa.</li><li>Aenean nonummy ornare augue.</li></ul><ul><li>Etiam ultricies mattis metus.</li><li>Mauris sagittis sem a nisl.</li><li>Aliquam ullamcorper nunc vel urna.</li></ul></div><div style="float:left; width:50%;"><li>Duis tincidunt interdum nibh.</li><li>Vivamus quis erat sit amet nisi mattis aliquet.</li><li>Sed in magna at dolor congue sollicitudin.</li><li>Maecenas mattis libero eget urna.</li></ul><ul><li>Integer lacinia mauris tincidunt turpis.</li><li>Mauris eleifend rutrum sapien.</li><li>Sed eu nisl vitae ipsum bibendum aliquet.</li><li>Suspendisse volutpat luctus est.</li><li>Vivamus quis urna sit amet dui rhoncus feugiat.</li></ul><ul><li>Curabitur malesuada iaculis magna.</li><li>Suspendisse adipiscing condimentum lorem.</li><li>Praesent aliquet est et tellus.</li><li>Praesent eget sem sit amet urna aliquam lacinia.</li><li>Maecenas sagittis iaculis lectus.</li><li>Quisque congue vulputate odio.</li><li>Nunc nec velit a nibh dignissim tempus.</li></div>

I just chose to use percentages, you can use pixels as well.

[aspnetguy]

again Firefox will be tricky with percentages because as soon as you add margins or padding to either div it will wrap because Firefox calculates the width like 50% + padding + margins not 50% including padding and margins.IE works fine though.

[Skemcin]

margin yes, but padding shouldn;t matter since that is inside the allocated area - right?

[aspnetguy]

keyword shouldn't but this is one thing that bugs me about Firefox.