How to align DIVs in a row

Question

Referring the following HTML, there are four DIV containers each containing an image, heading-element, paragraph-element, and a link. When the page opens on a full sized computer display, I want the three divs to align side by side across the screen.

So far they are just stacking vertically down the screen.

<div class="threeSpread">
    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="inner">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>
</div>

CSS

div {
    display: block;
}

.threeSpread {
    margin: 0 40px 40px 40px;
}

div.inner, div.outer {
    max-width: 30%;
}

@media (max-width: 568px) {
     .outer img {
          float: left;
          margin-right: 5px;
     }

     .inner img {
          float: right;
          margin-right: 5px;
     }

     h2 { 
         margin-top: 50px
     }
}

aligning 3 divs in a row with flexbox: http://stackoverflow.com/a/32122011/3597276 — Michael Benjamin, Mar 17 '16 at 03:37

AVI · Answer 1 · 2016-03-17T03:38:50.233

Make display:inline-block;

div {
    display: inline-block;
}

Working example: http://codepen.io/anon/pen/GZrNQe

Or else,

div {
    display: inline-block;
}



.threeSpread {

margin: 0 40px 40px 40px


}

div.inner, div.outer {
    max-width: 30%;
}



@media (max-width: 568px) {

    .outer img { float: left;
          margin-right: 5px;}

    .inner img (float: right;
            margin-right: 5px;
            )

    h2 {margin-top: 50px}


}

 <html>
<head>
<link rel="stylesheet" href="new.css" type="text/css" charset="utf-8">
</head>
<body>

<div class="threeSpread">
    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="inner">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>


</div>

    </body>

According to learnlayout.com,

You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height.

score 0 · Answer 2 · answered Mar 17 '16 at 03:34

0

Change your div class's display key to

display:inline-block

Check out this too http://www.w3schools.com/css/css_inline-block.asp

answered Mar 17 '16 at 03:34

Yash Lotan

378
1
5
21

How to align DIVs in a row

2 Answers2