CODEWITHSUNDEEP
htmlcsspositioncss-float
Alison
Alison

Reputation: 100

How can I position multiple divs side by side?

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!

Upvotes: 3

Views: 16806

Answers (2)

tahdhaze09
tahdhaze09

Reputation: 2213

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>

Upvotes: 2

Hussein
Hussein

Reputation: 42808

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

Upvotes: 6

Related Questions