need help, cant get float left working.

Hi, as u can see on my site: http://www.poba.net/iphone-wallpapers
3 albums are shown 1 per row. I want to show them side by side. but no luck.

can u see what is wrong with the following css?

.ngg-albumoverview {
	margin-top: 10px;
	width: 180px;
	float: left;
	clear:both; 
	display:block !important;
}

.ngg-album-compact {
	float:left;
	height:204px;
	padding-right:0px !important;
	margin:0px !important; 
	text-align:left;
	width:150px;	
}

.ngg-album-compactbox {
	height:150px;
	margin:0pt 0pt 0px !important;
	padding:12px 0pt 0pt 0px !important;
	width:120px;
}


.ngg-album-compactbox .Thumb {
	border:1px solid #000000;
	margin:0px !important;
	padding:0px !important;
	width:100px; 
	height:150px;
}

.ngg-album-compact h4 {
	font-size:15px;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
	width:110px;
}

.ngg-album-compact p {
	font-size:11px;
	margin-top:2px;
}

.ngg-clear {
	clear: both;
}

Code (markup):

And here is the html.

<div class="ngg-albumoverview">	
					<div class="ngg-album-compact">
						<div class="ngg-album-compactbox">
							<div class="ngg-album-link">
								<a class="Link" href="#" ><img class="Thumb" alt="Architecture" src="#"/></a>
							</div>
						</div>
						<h4><a class="ngg-album-desc" title="Architecture" href="#" >Architecture</a></h4>
						<p><strong>1</strong> Photos</p></div></div>

<div class="ngg-clear"></div>
<div class="ngg-albumoverview">	
					<div class="ngg-album-compact">
						<div class="ngg-album-compactbox">
							<div class="ngg-album-link">
								<a class="Link" href="#" ><img class="Thumb" alt="Abstract" src="#.jpg"/></a>
							</div>
						</div>
						<h4><a class="ngg-album-desc" title="Abstract" href="#" >Abstract</a></h4>
						<p><strong>270</strong> Photos</p></div></div>

<div class="ngg-clear"></div>

Code (markup):

i am newbie. I have played around with the css for a long time, but still cant get it working. please help. thanks

 

You placed each one in a div called 'ngg-albumoverview'

Remove it, it should be one group called 'ngg-albumoverview' and the rest inside it.

This should fix it, let me know if it doesn't:

<div class="ngg-albumoverview">	
					<div class="ngg-album-compact">
						<div class="ngg-album-compactbox">
							<div class="ngg-album-link">
								<a class="Link" href="#" ><img class="Thumb" alt="Architecture" src="#"/></a>
							</div>
						</div>
						<h4><a class="ngg-album-desc" title="Architecture" href="#" >Architecture</a></h4>
						<p><strong>1</strong> Photos</p></div>

					<div class="ngg-album-compact">
						<div class="ngg-album-compactbox">
							<div class="ngg-album-link">
								<a class="Link" href="#" ><img class="Thumb" alt="Abstract" src="#.jpg"/></a>
							</div>
						</div>
						<h4><a class="ngg-album-desc" title="Abstract" href="#" >Abstract</a></h4>
						<p><strong>270</strong> Photos</p></div>

Code (markup):

 

so there is no way to achieve it just by modifying the css codes?

since those div codes are generated by a wordpress plugin, it is so hard for me to modify those php codes.

 

i think u r right.
now i am dealing with the php codes to get rid of the div thing.

thanks.

 

The css is right,

You have it set up so that it's like this:

Container - clears and floats left holding the content.
Container - holds the information.
Container - makes a divider.

Then you just keep duplicating that, when in actuality it should be:

Container - clears and floats left holding the content.
Container - holds the information.
Container - holds the information.
Container - holds the information.
Container - holds the information.
Container - holds the information.
Container - makes a divider.

 

I don't even understand what this float left is.
Can anyone tell me?