Layout/formatting troubles with nesting divs. Too many divs? - css

Question

Okay now, I've got kind of a big one.
I'm working off a base wireframe (attached) and I'm having trouble implementing this layout. Basically, we've got a container div that has several more divs inside of it. Each of the interior divs are the components of the product and all have the exact same structured content flow - an image, title of the product, and links to the documentation. In the wireframe there are 7 component divs displayed (one is kinda hidden under my MSPAINT).
Desired achievements
The title and links must float next to the image icon, regardless of font size/line-height of the text of either.
The title MUST stay on one line. It is not allowed to wrap.
The interior divs must line up next to each other until they don't fit anymore, then wrap to the next line.
I can dynamically load content into the container div, but that div needs to be able to handle differing numbers of components. When users select product type and version, the number of components can and will change.
What is known
Some component titles will be short (7-ish chars) some will be long (27-ish chars).
All icons will be roughly 50x50 px.
There will be, at most, 8-9 component divs for some selected products.
There will be, at fewest, 3 component divs for some selected products.
Things I've given up on
Fine, we can fix the width and height of the component divs, see if I care.
Multiple divs. Whatever. The component divs don't need to have more nested divs. I'm an idiot and that was foolishness (I'm sure the answer is a component div with only an image and 2 paragraph elements, with the image floating left).
The code I've developed is huge and ugly as I've tried and commented out many things. Here's a jsFiddle with some generic code that I think has a minimal amount of damage done to it.
HTML
<div id="container">
<div class="component" id="1">
<div class="icon">
<img src="img.png"></a>
</div>
<div class="title">
<p>Product Item #1</p>
</div>
<div class="links">
<p>HTML PDF</p>
</div>
</div>
<div class="component" id="2">
<div class="icon">
<img src="img.png"></a>
</div>
<div class="title">
<p>Product Item 2</p>
</div>
<div class="links">
<p>HTML PDF</p>
</div>
</div>
...
// More component divs here.
</div>​
CSS
#container {
border: 1px solid red;
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 900px;
}
.component {
border: 1px solid black;
margin: 3px;
overflow: auto;
float: left;
padding: 3px;
}
.icon {
float: left;
}
​
Thanks so much for your help!

Answer 1

Maybe I would have done something like this FIDDLE
Component structure:
<div class="component" id="1">
<img class="icon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/SemiPD-icon.svg/50px-SemiPD-icon.svg.png">
<h1 class="title">Generic Product Name #1</h1>
<p class="links">
HTMLPDF
</p>
</div>
I made also some changes to the css part:
#container {
border: 1px solid red;
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 600px;
padding-bottom: 3px;
}
.component {
border: 1px solid black;
margin-top: 3px;
margin-left: 3px;
overflow: auto;
float: left;
padding: 5px;
}
.title {
margin-left: 55px;
font-size: 1.0em;
font-weight: bold;
}
.links {
margin-left: 55px;
}
.icon {
float: left;
}
​