漂浮不起作用

I'm currently working on a "webshop" kind of project. I am creating a product panel with a float:left; property but when I loop the products they are not coming next to each other but underneath the previous one.. What am I missing?

Code:

$web_string = "
<div class='product'>
<div class='image'>
    <img class='image' src='iphone.jpg' alt='iPhone' height='100%' width='100%' />
</div>
<div class='under'>
    <div class='info'>
    <ul>
        <li>iPhone</li>
        <li>iOS</li>
        <li>16 GB</li>
        <li>Black & White</li>
    </ul>
    <a href='#'>more info...</a>
    </div>
    <div class='extra'>
    <p>price: 588</p>
    <button>put in cart!</button>
    </div>
<div>
</div>";

CSS:

#wrapper{
    width: 100%;
    height:100%;
    background-color: blue;

}

.product
{

    float:left;
    width:250px;
    height:250px;
    background-color:red;

}

.onder
{
    height:50%;
}

.afbeelding
{
    background-color: green;
}

.info
{
    background-color:yellow;
    float:left;
    width:50%;
    height:100%;
}

.extra
{
    background-color: purple;
    float:right;
    width:50%;
    height:100%;
}

PHP Loop:

<?
echo $web_string;

    for($i = 0; $i < 4; $i++)
    {
        echo $web_string;
        if($i == 2)
        {
            echo "Hello World";
        }
    }
?>

EDIT: Changed ID's to Classes

You're using CSS ID selector which can be used to point only ONE element. So the float property is applied only on the first one. Use class instead : <div class='product'> and then in your CSS : .product { float: left; } Same thing for "image" and "under"

Here is a jfiddle fix:

link

Had to add float: left; on image and under ID too

#image {
    float: left;
}

#under {
    float: left;
}

Let me know if this is what you needed