Hi All,

I’m having issue getting my unordered list to separate into two columns…I have seven <li> but they all form down the page. What I am trying to do is have four in one column, then the other 3 next to them. If anyone could help I would appreciate it.

Thanks,
Trevor.

You will need to use the width and float CSS styles. For example:

HTML:
<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
  <li>Item E</li>
  <li>Item F</li>
</ul>

CSS:
ul
{
  float: left;
  width: 12em;
  margin: 0;
  padding: 0;
  list-style: none;
}

li
{
  float: left;
  width: 6em; /* this should be half for two columns of ul width */
  margin: 0;
  padding: 0;
}

Will give:
Item A   Item B
Item C   Item D
Item E   Item F

____________________
sudoku - social - puppies

Hi,

The above is true and it will work, but to get properly 4 in one column and 3 in another this might work out better, it all depends how you see it to be honest I guess;

CSS File;

XHTML File;