CODEWITHSUNDEEP
htmlcsslayout
Evorlor
Evorlor

Reputation: 7562

How do I make a row of divs with rows?

I am trying to make a row of divs, where each div has two rows. I have the following code:

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Row of Divs</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="inline">
    <div class="block">
        <p>
            ABC
            <br>
            DEF
        </p>
    </div>
    <div class="block">
        <p>
            GHI
            <br>
            JKL
        </p>
    </div>
    <div class="block">
        <p>
            MNO
            <br>
            PQR
        </p>
    </div>
    <div class="block">
        <p>
            STU
            <br>
            VWX
        </p>
    </div>
</div>
</body>
</html>

style.css

div.inline{
    display: inline;
}

div.block{
    display: block;
}

So I want the following output:

ABC    GHI    MNO    STU
DEF    JKL    PQR    VWX

But I get the folling output:

ABC 
DEF

GHI
JKL

MNO 
PQR

STU
VWX

How can I fix my code to stay inline the as a row of rows, as shown above?

Upvotes: 0

Views: 108

Answers (3)

Stickers
Stickers

Reputation: 78686

There are many ways as follows.

Use inline-block (recommended)

.block { display: inline-block; } /*child*/

OR float

.block { float: left; } /*child*/

OR flex

.inline { display: flex; } /*parent*/

OR table + table-cell

.inline { display: table; } /*parent*/
.block { display: table-cell; } /*child*/

Upvotes: 2

Stewartside
Stewartside

Reputation: 20905

You are setting .block to be a block element, therefore making a full width element that clears everything from both sides.

You need to set this to be an inline or inline-block element and it should work as expected.

.inline {
  display: inline;
}
.block {
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Row of Divs</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div class="inline">
    <div class="block">
      <p>
        ABC
        <br>DEF
      </p>
    </div>
    <div class="block">
      <p>
        GHI
        <br>JKL
      </p>
    </div>
    <div class="block">
      <p>
        MNO
        <br>PQR
      </p>
    </div>
    <div class="block">
      <p>
        STU
        <br>VWX
      </p>
    </div>
  </div>
</body>

</html>

Upvotes: 2

vimes1984
vimes1984

Reputation: 1693

Like this: https://jsfiddle.net/ar97yzqv/1/ CSS: 

.inline{
        display: inline;
    }

    .block{
        display: inline-block;
    }

Upvotes: 2

Related Questions