CODEWITHSUNDEEP
phphtmlcss
Orion
Orion

Reputation: 227

Float left not working

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

Upvotes: 1

Views: 246

Answers (2)

bondbaby11
bondbaby11

Reputation: 305

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

Upvotes: 0

Pete_Gore
Pete_Gore

Reputation: 634

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"

Upvotes: 5

Related Questions