On list display as 2?

HTML & CSS
1

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

2 
        
.country-lst {
  width:100%;
  float:left;
}

.country-lst li {
  width:50%;
  float:left;
}




<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>
3

Fantastic! Thanks very much.

4

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

5

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

6

Hi,

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


<!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. :slight_smile:

7

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?

8

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)

9

Thanks, Looks just what I need.

10

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.

11

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

12

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

13

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.

14

OK, Thanks.