How can I position multiple divs side by side?

html css position css-float

16,751

Solution 1

You mean like this http://jsfiddle.net/efVjj/

Solution 2

You really only need the .imageleft class. Apply to both divs and you're set.

Here's the code (I added a border to outline the divs):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
    border:1px solid #000;
}
</style>
<title>Untitled Document</title>
</head>
<div class="imageleft">
<img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>

</div>
<div class="imageleft">
<img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>

</div>
<body>
</body>
</html>

16,751

Author by

Alison

Updated on June 04, 2022

Comments

Alison about 2 years

I have several div's that contain a floated image and an unordered list. I want both of these to be positioned side by side down the page.

The issue is, as the divs go down the page the whole thing falls apart. The images on the right start to go lower and lower and the list items go higher and higher up. Here is what I did.

    .imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
}

.container-right {
display:inline;
    padding-bottom: 10px;
    width: 500px;

}

.container-left {

    float:left;
    padding-bottom: 10px;
    width: 500px;

}


    <div class="inline">
        <div class="container-left">
            <img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
        <div class="container-right">
            <img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
    </div>

I tried adding a div around the 2 divs but it doesn't seem to help. How can I prevent this undesired behavior?

Thanks for any tips!