On list display as 2?

**cwedgwood50** · Feb 18, 2010 06:23

Hi, Just wondered if this is possible in CSS?

We currently use tables to lay this out but would like to get rid of them.

We have a list of 10 country names that we display 5 in one table cell and the next 5 in the next cell so that they display like 2 lists of 5 countries next to each other.

Ideally I would like to markup the list of 10 countries as a single list and have css take care of splitting it into 2 instead, if it can do this.

I'm thinking there might be some way to limit the size of the container element perhaps and have the display move to the left and keep going so it looks like 2 lists of 5 elements each but semantically is just one list of 10. Does that sound like it should be possible?

Thanks in advance

**kohoutek** · Feb 18, 2010 06:31

Code CSS:

.country-lst {
  width:100&#37;;
  float:left;
}
 
.country-lst li {
  width:50%;
  float:left;
}

Code HTML4Strict:

<ul class="country-lst">
    <li><a href="#" title="">Country A</a></li>
    <li><a href="#" title="">Country B</a></li>
    <li><a href="#" title="">Country C</a></li>
    <li><a href="#" title="">Country D</a></li>
</ul>

**cwedgwood50** · Feb 18, 2010 06:37

Fantastic! Thanks very much.

**cwedgwood50** · Feb 18, 2010 06:49

Just one thought though; Could it be done and still retain the order going downwards?

ie
Country A Country C
Country B Country D

instead of;
Country A Country B
Country C Country D

just using css without having to reorder the html markup?

Thanks

**kohoutek** · Feb 18, 2010 07:11

Yes, there is. But it's a lot more complicated. Have a look.

You may also want to read the entire thread as it gives you information on the possible pitfalls. http://www.sitepoint.com/forums/showthread.php?t=648340

**Paul O'B** · Feb 18, 2010 11:57

Hi,

If you can add some classes to the last 5 items you can do it like this more easily.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
    margin:0;
    padding:0;
    list-style:none;
}
a {
    text-decoration:none
}
ul.country {
    width:600px;
    border:1px solid #000;
    float:left;
}
ul.country li {
    float:left;
    width:301px;
    clear:left
}
ul.country li.c2 {
    width:auto;
    clear:none;
    float:none
}
</style>
</head>
<body>
<ul class="country">
    <li><a href="#" title="">Country 1</a></li>
    <li><a href="#" title="">Country 2</a></li>
    <li><a href="#" title="">Country 3</a></li>
    <li><a href="#" title="">Country 4</a></li>
    <li><a href="#" title="">Country 5</a></li>
    <li class="c2"><a href="#" title="">Country 6</a></li>
    <li class="c2"><a href="#" title="">Country 7</a></li>
    <li class="c2"><a href="#" title="">Country 8</a></li>
    <li class="c2"><a href="#" title="">Country 9</a></li>
    <li class="c2"><a href="#" title="">Country 10</a></li>
</ul>
</body>
</html>

However 2 lists floated side by side would of course be the easiest of all.

**cwedgwood50** · Feb 18, 2010 17:41

Thanks. I think we can add classes in without too much problem.
Can this method be easily extended to 3 or 4 columns if we had a bigger list?

**RyanReese** · Feb 18, 2010 17:45

Yes it can extend to 1000 columns as long as the parent has enough width to fit them all

. You will have to mess with the widths though to fit however many columns you will be creating.

You will also need to add a class to the <li> for whatever column (as Paul did for the <li>'s belonging to the second column)

**cwedgwood50** · Feb 18, 2010 17:55

Thanks, Looks just what I need.

**Paul O'B** · Feb 19, 2010 08:27

Originally Posted by cwedgwood50

Thanks. I think we can add classes in without too much problem.
Can this method be easily extended to 3 or 4 columns if we had a bigger list?

That example can only allow 2 columns. If you want more columns then you would be better of just floating complete uls 3 or 4 across as required.

**cwedgwood50** · Feb 19, 2010 13:10

Hi Paul,
Do I understand what you mean correctly?
Do you mean put them each in a different <ul> list.
eg

<ul>
<li><a href="#" title="">Country A</a></li>
<li><a href="#" title="">Country B</a></li>
</ul>
<ul>
<li><a href="#" title="">Country C</a></li>
<li><a href="#" title="">Country D</a></li>
</ul>
<ul>
<li><a href="#" title="">Country E</a></li>
<li><a href="#" title="">Country F</a></li>
</ul>

That is what I would like to avoid doing. I want just one <ul> element ad have the layout done with css.

We generate the xhtml markup dynamically from server-side code so wish to have complete independence between the structure of the xhtml and the design.

For example if we altered the server-side code to give us 3 <ul> elements because the design wanted that and then someone came along and wanted to redesign the front-end to have 4 then we would have to go back and alter the servce-side code to accomplish this. It's this interdependence that we want to break.

Thanks

**Luki_be** · Feb 19, 2010 13:48

Originally Posted by cwedgwood50

Hi Paul,
Do I understand what you mean correctly?
Do you mean put them each in a different <ul> list.
eg

<ul>
<li><a href="#" title="">Country A</a></li>
<li><a href="#" title="">Country B</a></li>
</ul>
<ul>
<li><a href="#" title="">Country C</a></li>
<li><a href="#" title="">Country D</a></li>
</ul>
<ul>
<li><a href="#" title="">Country E</a></li>
<li><a href="#" title="">Country F</a></li>
</ul>

That is what I would like to avoid doing. I want just one <ul> element ad have the layout done with css.

We generate the xhtml markup dynamically from server-side code so wish to have complete independence between the structure of the xhtml and the design.

For example if we altered the server-side code to give us 3 <ul> elements because the design wanted that and then someone came along and wanted to redesign the front-end to have 4 then we would have to go back and alter the servce-side code to accomplish this. It's this interdependence that we want to break.

Thanks

Maybe you could try this method ? No floats, relative positioning .... just plain negative margins

**Paul O'B** · Feb 19, 2010 16:40

Originally Posted by cwedgwood50

Hi Paul,
Do I understand what you mean correctly?
Do you mean put them each in a different <ul> list.
eg

Yes that's what I meant but I knew that it wasn't what you really wanted

. You will have to wait for css3 to be implemented in all browsers and the multi column modules will cater for this sort of thing properly.

The only alternatives are relatively messy and involve adding classes and manipulating with negative margins etc and rely on lines being of equal height.

**cwedgwood50** · Feb 20, 2010 05:00

OK, Thanks.

User Tag List

Thread: On list display as 2?

Thread Tools

Display

On list display as 2?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions