Wrapped list formatting issues

[Meles]

Hey guys, I'm attempting to create an unordered list with different sized entries that wrap around one another. I'm not sure how else to describe this so here are some images demonstrating.Here is what I have http://www.krashpalisades.co.uk/images/ul-list01.png

and here is what I would like to achieve http://www.krashpalisades.co.uk/images/ul-list02.pngI remember seeing a demonstration of this for an image thumbnail gallery a few years ago, but I can't find a reference to it anywhere despite extensive searching.Here is some examples of the code I have so far.

<div class="donor_plaque"> <ul>										<li>			<div class="donor_diamond">			</div>		</li>						<li>			<div class="donor_stone">			</div>		</li>		<li>			<div class="donor_iron">			</div>		</li>		<li>			<div class="donor_iron">			</div>		</li>		<li>			<div class="donor_gold">			</div>		</li>		<li>			<div class="donor_stone">			</div>		</li></ul></div>

(Divs are empty in the example but will contain details of donors etc)Here is the CSS

.donor_plaque li		{			border-radius: 5px;			margin-right: 5px;			margin-bottom: 8px;			float:left;			list-style-type: none;			list-style-image: none;		}.donor_stone		{			background: url('images/stone.png') center; 			font-weight:bold;			border-radius: 5px;			height:58px;			width:128px;			border-left: #C0C0C0 solid 2px;			border-right: #000000 solid 2px;			border-top: #C0C0C0 solid 2px;			border-bottom: #000000 solid 2px;			text-shadow: #FFFFFF 0.0em 0.1em 0.5em;		}	.donor_iron 		{			background: url('images/iron_block.png') center; 			font-weight:bold;			border-radius: 5px;			height:58px;			width:128px;			border-left: #C0C0C0 solid 2px;			border-right: #000000 solid 2px;			border-top: #C0C0C0 solid 2px;			border-bottom: #000000 solid 2px;			text-shadow: #FFFFFF 0.0em 0.1em 0.5em;		}	.donor_gold  		{			background: url('images/gold_block.png') center; 			font-weight:bold;			border-radius: 5px;			height:58px;			width:128px;			border-left: #FFEE00 solid 2px;			border-right: #000000 solid 2px;			border-top: #FFEE00 solid 2px;			border-bottom: #000000 solid 2px;			text-shadow: #FFFFFF 0.0em 0.1em 0.5em;		}	.donor_diamond 		{			background: url('images/diamond_block.png') center; 			font-weight:bold;			border-radius: 5px;			height:128px;			width:128px;			border-left: #E0E0FF solid 2px;			border-right: #000088 solid 2px;			border-top: #E0E0FF solid 2px;			border-bottom: #000088 solid 2px;			text-shadow: #FFFFFF 0.0em 0.0em 0.2em;		}		

If anyone has any ideas of how I can get the list to wrap correctly I would really appreciate the help.Cheers guys!

Edited October 13, 2013 by Meles

[Hadien]

the most robust way to do this is to use tables. HTML is incapable of having elements to float onto BOTH sides of a larger element to fit. Using tables is by far the simplest approach, which for the diamond cell you simply use rowspan="2". but you can use HTML+CSS to "fake" both-floating too:

<div class="container">			<div class="donor_diamond_container"><div class="donor_diamond"></div></div>			<div class="donor_stone"></div>			<div class="donor_iron"></div>			<div class="donor_iron"></div>			<div class="donor_gold"></div>			<div class="donor_empty"></div>			<div class="donor_stone"></div>			<div class="donor_stone"></div>			<div class="donor_iron"></div>			<div class="donor_iron"></div>						<div class="donor_iron"></div>			<div class="donor_gold"></div>			<div class="donor_diamond_container"><div class="donor_diamond"></div></div>			<div class="donor_gold"></div>			<div class="donor_stone"></div>						<div class="donor_gold"></div>			<div class="donor_stone"></div>			<div class="donor_empty"></div>			<div class="donor_iron"></div></div>

I simply removed the unordered list in my example and just used a group of divs (also switched out your div container class for mine even though I didn't need to). since div.diamond is meant to span to the next row I built a container for it. the diamond_container has the same dimensions as the normal boxes, but the div.diamond inside has the dimensions to span to the next row (put your content inside THESE divs) then I inserted a div.empty where the div.diamond would span into the next line. the .empty divs are merely placeholders so that the elements around them render as you want them to. the diamond_containers are like the .empty divs, they are merely placeholders to help properly format other elements

	.container		{			display: block;			width: 700px;		}	.container>div		{			display: inline-block;			float:left;			vertical-align: top;			margin: 0 0 5px 5px;			width:128px;			height:58px;			font-weight:bold;			border-radius: 5px;			border-right: #000000 solid 2px;			border-bottom: #000000 solid 2px;			text-shadow: #FFFFFF 0.0em 0.1em 0.5em;		}.donor_stone		{			background: #555555 center; 			border-left: #C0C0C0 solid 2px;			border-top: #C0C0C0 solid 2px;		}	.donor_iron 		{			background: #889 center; 			border-left: #C0C0C0 solid 2px;			border-top: #C0C0C0 solid 2px;		}	.donor_gold  		{			background: #AAAA35 center; 			border-left: #FFEE00 solid 2px;			border-top: #FFEE00 solid 2px;		}	.donor_diamond_container 		{			padding: 0px;		}	.donor_diamond		{			background: #AAAADD center; 			margin:0;			height:125px;			width:128px;			font-weight:bold;			border-radius: 5px;						border-left: #E0E0FF solid 2px;			border-right: #000088 solid 2px;			border-top: #E0E0FF solid 2px;			border-bottom: #000088 solid 2px;			text-shadow: #FFFFFF 0.0em 0.0em 0.2em;		}	.container>div.donor_empty		{			z-index: -1; 			border:0px solid black;			width:128px;			opacity:0;			height:58px;			margin:2px 1px 7px 7px;		} 

in this example I used display:inline-block and set the width of the container so that I didn't have to worry about line returning. you can also use display:table, table-row, and table-cell to allow other elements to behave like a table (do be aware that CSS Tables don't support row/colspan)

[davej]

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>#wrap {width: 800px;margin:0 auto;}.group{float:left;width:264px;}.donor_stone		{			float:left;                        margin: 2px 0 2px 0;			background: url('images/stone.png') center; 			font-weight:bold;			border-radius: 5px;			height:58px;			width:128px;			border-left: #C0C0C0 solid 2px;			border-right: #000000 solid 2px;			border-top: #C0C0C0 solid 2px;			border-bottom: #000000 solid 2px;			text-shadow: #FFFFFF 0.0em 0.1em 0.5em;		}			.donor_diamond 		{			float:left;			background: url('images/diamond_block.png') center; 			font-weight:bold;			border-radius: 5px;			height:128px;			width:128px;			border-left: #E0E0FF solid 2px;			border-right: #000088 solid 2px;			border-top: #E0E0FF solid 2px;			border-bottom: #000088 solid 2px;			text-shadow: #FFFFFF 0.0em 0.0em 0.2em;		}	</style></head><body><div id="wrap"><div class="group"><div class="donor_diamond"></div><div class="donor_stone"></div><div class="donor_stone"></div></div><div class="group"><div class="donor_diamond"></div><div class="donor_stone"></div><div class="donor_stone"></div></div><div class="group"><div class="donor_diamond"></div><div class="donor_stone"></div><div class="donor_stone"></div></div><div class="group"><div class="donor_diamond"></div><div class="donor_stone"></div><div class="donor_stone"></div></div><div class="group"><div class="donor_diamond"></div><div class="donor_stone"></div><div class="donor_stone"></div></div><div class="group"><div class="donor_diamond"></div><div class="donor_stone"></div><div class="donor_stone"></div></div></div></body></html>

[Meles]

Cheers guys.I continued searching and managed to find the code I was thinking of, turns out it didn't work the way I remembered it.here's the link if you're interested in seeing it, It's a nice bit of code for a photo gallery nonetheless.http://www.cssplay.co.uk/articles/gallery/

I like Hadien's ideas, I will experiment with them and see if either suit my needs.

I think having them in vertical columns will cause me problems later down the line, trying to keep them chronological when I plug in the data.Thanks for your thoughts, both