CODEWITHSUNDEEP
htmlcss
Daniel Schealler
Daniel Schealler

Reputation: 396

How to correctly float an image to the left when placed in a sequence of divs

I'm trying to display a sequence of divs in html.

Each div has an image that I want to take up on the left. Each div will also have a set of information of varying length that I want to display to the right of that image.

The problem I'm having is that the images being floated to the left are catching on each other. What I want is for each .item div to display in sequence down the page, but instead they crawl slowly to the right as each image catches on itself.

Note that in the real-world example this is based on, the heights of the images and the number of the lines in the details section may vary, so it is not known ahead of time which of the two will be longer than the other for any given .item div.

I'm sure I used to know how to do this, but for the life of me I can't work it out. I'm either stupid or merely in very bad need of caffeine. It's clearly been far too long since I dabbled in web design.

Sample code below.

<html>
<head>
<title>Float Left Sample</title>
<style>
    .sidebar { 
        float: left; 
    }
</style>
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="sidebar">
                <img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
            </div>
            <div class="details">
                <div>Details Line One</div>
                <div>Details Line Two</div>
                <div>Details Line Three</div>
            </div>
        </div>
        <div class="item">
            <div class="sidebar">
                <img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
            </div>
            <div class="details">
                <div>Details Line One</div>
                <div>Details Line Two</div>
                <div>Details Line Three</div>
            </div>
        </div>
        <div class="item">
            <div class="sidebar">
                <img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
            </div>
            <div class="details">
                <div>Details Line One</div>
                <div>Details Line Two</div>
                <div>Details Line Three</div>
            </div>
        </div>
        <div class="item">
            <div class="sidebar">
                <img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" />
            </div>
            <div class="details">
                <div>Details Line One</div>
                <div>Details Line Two</div>
                <div>Details Line Three</div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 86

Answers (4)

Dharam Mali
Dharam Mali

Reputation: 959

It's Simple, just try this out. It will allow you flexibility to add any Size of image or any amount of text. Layout will not break.

Add this CSS Code Only:

<style>
    .item{
        clear:both;
    }
    .sidebar, .details { 
        float: left; 
        padding-bottom:20px;
    }
</style>

Upvotes: 1

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

Add css like this:

.item {
    float: left;
}

.details {
    float: right;
}
.container {
    float: left;
    width: 300px;
}

2nd Option is :

.sidebar, .details { 
    float: left; 
 }
.item{
    float: left;
    width:100%;
 }

Upvotes: 2

Daniel Schealler
Daniel Schealler

Reputation: 396

Silly me, think I just worked it out. Should have tried for another 10 minutes before posting my question on Stack Overflow.

Solution was to use the following css style.

<style>
    .item {
        overflow: hidden;
    }
    .sidebar { 
        float: left; 
    }
</style>

Upvotes: 0

user3555228
user3555228

Reputation: 31

If you you use position absolute you can place things right where you want them. With px, em or %.

Upvotes: 0

Related Questions