[devGOD]

I need some assistance with converting this table setup into a div,ul/li setup.

I know how to use ul and li to set four boxs and float it right for one row but how do i do multiple rows, do i just repeat the same ul/li float right and for the top bar how do i float text on the left and right?

if someone can put together a quick example.

thanks in advance

[2Dfruit]

I personally wouldn't use a list for that. I'd create a div class with the info for one box and put it inside a container that'd allow it to loop nicely ie 200px div in a 800px box..float the div left.

I did something similar here Smyth Property - Luxury Villas and Apartments in Turkey

feel free to use the code

[iWonder]

Try this

ul.mainbox {
	list-style: none;
	border: 1px solid #ccc;

}
ul.mainbox li{
	width: 140px;
	padding: 10px;
	margin: 5px;
	float: left;
	background-color: #eee;
}
.clear {
	clear: both;
}

 <ul class="mainbox">
 	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
 	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
	<li> <img src="http://www.designerstalk.com/forums/image.php?u=4088&dateline=1186680767" alt="Image" /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
	<div class="clear"></div>
 </ul>

[pgo]

Don't use a <br /> if you can help it.

Don't use a clearing element if you can help it. Especially when you're putting a <div> directly inside a <ul>. I'm 95% sure that's invalid HTML.

I would do each one as a unique box, defined by a <div> like 2Dfruit suggests.

[devGOD]

how do i prevent the new boxes from making the footer move to the right? it loads fine at the bottom in IE but FF is moving the footer when i add the boxes

[pgo]

You need to clear them. There are 3 ways to do this:

1. Use a clearing element like iWonder suggested (though his example is invalid).

2. Float the parent. Floats containing floats will automatically clear.

3. Use the method I prefer - the "clearfix" method. Excellent discussion in the article New clearing method needed for IE7?

I ignore the added lines for IE/Mac because I don't bother supporting IE/Mac on any of my sites.

Here's what I do currently:

In main stylesheet:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

That provides clearing for all good browsers - Firefox, Safari, Opera, etc.

Then in my IE-only stylesheet:

.clearfix { height: 1%; }

[devGOD]

Originally Posted by pgo

You need to clear them. There are 3 ways to do this:

1. Use a clearing element like iWonder suggested (though his example is invalid).

2. Float the parent. Floats containing floats will automatically clear.

3. Use the method I prefer - the "clearfix" method. Excellent discussion in the article New clearing method needed for IE7?

I ignore the added lines for IE/Mac because I don't bother supporting IE/Mac on any of my sites.

Here's what I do currently:

In main stylesheet:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

That provides clearing for all good browsers - Firefox, Safari, Opera, etc.

Then in my IE-only stylesheet:

.clearfix { height: 1%; }

thanks pgo... amazing that fixed it =)