PLEASE HELP - CSS bug with float:left

Hi Guys,

Basically, I encountered a bug and I have no idea how to get rid of it.
You can take a look at http://danstrog.com/

I have four divs in a row (with multiple rows), each has float:left property and a 66px margin for some spacing.
They go like this:

<div id="portfolio-list">
		<li class="work web">
			<a href="/"><p><img src="demo.jpg" alt="" width="200" height="200" class="v" /></p></a>
			<p><a href="/">Title</a></p>
		</li>
		<li class="work web">
			<a href="/"><p><img src="demo.jpg" alt="" width="200" height="200" class="v" /></p></a>
			<p><a href="/">Title</a></p>
		</li>
		<li class="work web">
			<a href="/"><p><img src="demo.jpg" alt="" width="200" height="200" class="v" /></p></a>
			<p><a href="/">Title</a></p>
		</li>
</div>

Code (markup):

Here's the CSS code for all that:

#portfolio-list { margin-top:40px; width:1080px; overflow:hidden; margin-bottom:30px; list-style-type:none; }
.work p { margin-top:15px; font-size:14px; text-align:center; width:200px; line-height:23px; }
.work { float:left; margin-bottom:40px; margin-right:65px; }

Code (markup):

The problem that I'm having is that the divs sometimes skip rows and leave blank spaces between each other... it's kinda hard to explain, just take a look at http://danstrog.com

I've had this bug happen before and it just disappeared randomly.
Really appreciate any help on this

PS: Screenshot

 

Seems like you're giving yourself extra work for the images. You have a height and width attribute for all of the images when you could easily add the hight of the image with a simply css modification. Also, you have li with no list type. You need to add a

<ul>
or
<ol>

Code (markup):

in order for you to even use "<li>"

 

Thanks, I added the <ul> tags, but the problem still persists.

 

<div id="portfolio-list">
     <ul>
		<li class="work web">
			<a href="/"><p><img src="demo.jpg" alt="" width="200" height="200" class="v" /></p></a>
			<p><a href="/">Title</a></p>
		</li>
		<li class="work web">
			<a href="/"><p><img src="demo.jpg" alt="" width="200" height="200" class="v" /></p></a>
			<p><a href="/">Title</a></p>
		</li>
		<li class="work web">
			<a href="/"><p><img src="demo.jpg" alt="" width="200" height="200" class="v" /></p></a>
			<p><a href="/">Title</a></p>
		</li>
     </ul>
</div>

Code (markup):

div > ul > li
All list items (li) must have a list type as their parent. I've refreshed the page multiple times and I don't see this in your source code.

 

Hmm, are you sure? Because I did the same and it's there.
Anyway, that's not the point, because it does not solve the problem

 

I've checked with Chrome and firefox using both of the DOM inspectors and viewing the source code and it doesn't show up.

This is what you have currently:

portfolio-list { margin-top:40px; width:1080px; overflow:hidden; margin-bottom:30px; list-style-type:none; can be removed }
#portfolio-list ul { list-style-type:none; }
.work p { margin-top:15px; font-size:14px; text-align:center; width:200px; line-height:23px; }
.work a:hover { color:#777; }
.work { float:left; margin-right:30px; }

You can greatly reduce the number of class attributes you have on each li by consolidating your css. I tried creating this same format in my editor and this is the code I used:

body {margin:auto; width:1080px; background-color:#4c4c4c; font:12px Verdana, Geneva, sans-serif; color:#fff;}

#container {margin:40px auto 30px; width:1080px; overflow:hidden;}

#container ul {list-style-type:none;}

#container ul li {width:200px; float:left; margin:0px 30px 30px 0px;}

/*Used a mock div to create the image*/
#container li div.img {width:200px; height:200px; background-color:#3b3b3b;}

Code (markup):

And here is the HTML that I used:

<div id="container">
	<ul>
		<li><div class="img">&nbsp;</div></li>
		<li><div class="img">&nbsp;</div></li>
		<li><div class="img">&nbsp;</div></li>
		<li><div class="img">&nbsp;</div></li>
		<li><div class="img">&nbsp;</div></li>
		<li><div class="img">&nbsp;</div></li>
	</ul>
</div>

Code (markup):

Going off of the code I've created, you could probably use the following css and be fine:

#portfolio-list { margin:40px 0 30px; /*top, left+right, and bottom in that order*/ width:1080px; overflow:hidden; }

#portfolio-list ul { list-style-type:none; }

#portfolio-list ul li {width:200px; float:left; margin:0 30px 30px 0; /*top, right, bottom, left margins in that order*/ }

#portfolio-list ul li img {height:200px; width:200px; border:none; /*declares img properties so you don't have to in HTML*/ }

#portfolio-list ul li p { margin-top:15px; font-size:14px; text-align:center; width:200px; line-height:23px; }

#portfolio-list ul li p a:hover { color:#777; }

Code (markup):

And your source code would be the following:

	<div id="portfolio-list">
            <ul>
		<li>
			<a href="http://danstrog.com/2010/11/07/website-design-for-zook/"><p><img src="http://danstrog.com/wp-content/uploads/2010/11/zook-sm.jpg" alt="" title="Zook" /></p> 
</a>
			<p><a href="http://danstrog.com/2010/11/07/website-design-for-zook/">Website Design for Zook</a></p>
		</li>
           </ul>
         </div>

Code (markup):

Using this method would greatly simplify your code and would probably help you implement any client side scripts that you want to use.

Hope this helps... If you're in doubt and it's simply not working, you can always use a table