CODEWITHSUNDEEP
htmlcss
user3079558
user3079558

Reputation:

how to arrange divs having images in a horizontal line

I have the following html..

<div class="container animate" data-animation="pulse">
    <div class="margin30 "></div>
    <h2 class="border-title">Powering payments for <span></span></h2>
    <div class="margin25"></div>
    <div style="display:table-cell;">
        <div>
            <img src="images/clientlogos/pappa.png" title="" width="170" height="88" style="margin-left:5px;">
        </div>
        <div>
            <img src="images/clientlogos/offergrid.png" title="" width="215" height="55" style="margin-left:5px;">
        </div>
        <div>
            <img src="images/clientlogos/index.png" title="" width="121" height="33" style="margin-left:5px;">
        </div>
        <div>  
            <img src="images/clientlogos/fudr.png" title="" width="156" height="65" style="margin-left:5px;">
        </div>
        <div>
            <img src="images/clientlogos/inloc8.png" title="" width="139" height="39" style="margin-left:5px;">
        </div>
    </div>
</div>

Can someone tell how could I arrange all the divs having images in a horizontal line.I want all the images in one line

Upvotes: 2

Views: 2182

Answers (3)

Vereos
Vereos

Reputation: 513

Since you are only storing images in your div, you should check if it's better for you to use the <img> tag or to set them as a background-image, as stated in this post. It mainly depends on what you are going to do with those images. Check the link for further informations.

Floating the divs on left like others already said is the proper way to do it. You could also use display:inline-block; (even if divs are rendered as blocks by default).

Personally I didn't get if you wanted just to display them on one line, or to align them on top: in this case, you can use vertical-align:top; in addition to the other CSS parameters to achieve the result.

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

div, img {
    float: left;
    display: inline-block;
}

Upvotes: 3

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

float: left on your divs is one option:

http://jsfiddle.net/c3DV3/

Upvotes: 2

Related Questions