CSS list items with alternate margins

This question involves css + php. I have a php solution to my problem but I am wondering if there is a way to do it with pure css.

The layout is a large box, say a <ul> element, with smaller boxs <li>'s inside it. The way the <li>boxs inside should be placed is 2 boxs per row, the box on the left should be touching the left border of the <ul> element, and the right <li>box should be touching the right border of the <ul> element. The 2 <li>s inside each row will have a margin between eachother(so either the left one must have a margin-right, or the right one must have a margin-left).

To do this I would probably float all the <li>'s left and give each alternate <li> a calculated margin-left or margin-right.

My problem is I have a lot of items to list and I want to use php to automatically place them all. I am sure there is a way to use php to assign alternate classes to <li> elements but I wonder if there is a simple css trick to make the <li>s stick to the corners but have space inbetween eachother -without assigning different classes/styles to alternate <li>s.

To summarise:
One <li> must have a margin left or right to make the space inbetween them, but neither of them can have the same margin(otherwise they wont both stick to the parent <ul>'s borders. I want to achieve this without assigning alternate classes to the <li>s. I am not sure there is a way to do this but I am open to ideas.

Yes that is the process you are right. I believe that is what I have done. The content is a list of blocks/items representing a project. These blocks/items each contain an image and some data about the project.

This I would define as a list of items. I chose a UL because it could be coded quicker. A DL is probably more semantic but will be more complicated for this issue.

I have probably not explained myself clearly which is why you think I do not understand semantics. I do and I use them. Forget the text, lets assume this is a list of images(so forget the “caption” type part). This is a list of items of the same data class. I believe a ul would be used to display this. So if you agree that a list of images would best semanticaly be displayed with a UL then we can proceed to answering my question about positioning.

You keep saying things about semantics which are all true, but are not relative to my problem because I have chosen a semantic element relative to the data structure of my content. This is a list of projects, and each list item contains data(text) and media(image) about the project. Perhaps a DL would be semantic for the image+caption scenario, but say there were 3 images and no text per list item, then it would definetly be UL in mu opinion.

I am aware of the difference between UL and DL and other html elements and their purpose for displaying different types of data in a relative and semantic structure. Forget about whats inside the list items now, just assume its a list of images.

What I am displaying is a list of images and corresponding captions. Inside each <li> would be an image and a text caption to go with it.

You are right the type of content determines the element to be used. My content I would define as a list of items which is why I am using a list element.

Can you suggest a more semantic element to use in place of a list, to display a list of images and corresponding captions?

Yes I see what you are saying. I am aware of the different kinds of lists and I use them all regularly. Each <li> was a project with the picture of the project and the text/caption was a title and link. I chose UL over DL in this case because it is a personal webpage and it seemed UL would be fastest to code. Note I do realise the importance of semantics and I always use standards with client projects.

I still have the same coding problem with a definition list. The item and definition, wether combined in a single <li> or in a <dt> and <dd>, each item/project would still have alternate margins.

I do not want rows of (I think you think I want this):

Yes obviously the above would be a perfect DL layout.

I want rows of:

I think you were misunderstanding me. I realise that the point of lists is to have the list items in the same structure and to contain the same class of data. I want the list items to contain the same data. I do want them in the same structure -all floated left, I just want them to stick to the parent’s borders and not eachother. Each list item I want to hold exactly the same information(an image and corresponding text/links). So with DL I would still have to use alternate classes for positioning.

There is more than one kind of list and more than one kind of list structure in html.

If I understand your words, you are describing what seems to me to be a list of paired terms, best done with the DL tag structure. The image is the “term” and the caption is the “definition”.

It certainly doesn’t belong in the UL structure where each item is supposed to be an instance of a particular class of information, each instance being the same structure.

Sounds like inappropriate use of an unsemantic element to me. What decides the element to use shoule be the nature of the content. I can’t imagine any content belonging in an unordered list that it would be appropriate to display in such a way.

Find the appropriate semantic element first, then decide how to present it.

I don’t see any problem with using a list. What your marking up is a list of images with captions. A list seems fine to me,

How you mark up content is dependant on the semantic structure of that content, not on how you “want it to look”, which you shouldn’t even be thinking of as you do the html markup. Make the structure right and layout becomes a relatively easy matter.

Get the html right first. Worry about presentation after you have that done. Decide on the semantic structure that best describes your content, and use that.

You are trying to decide on the html based on the appearance you want. That’s backwards and only leads to confusion.