Multiple div with equal width in a container

Question

I am trying to place multiple divs with same width inside a container in same row as below

    ++++++++++++++++++++++++++++++
    + ++++++++ ++++++++ ++++++++ +
    + +      + +      + +      + +
    + + box1 + + box2 + + box3 + +
    + +      + +      + +      + +
    + ++++++++ ++++++++ ++++++++ +
    ++++++++++++++++++++++++++++++

The container has width:100%; I was successful to place 3 divs in same row. float: left; display: inline-block; but I couldn't fix the same width for the multiple divs.

First read faq and about us .. those two are important section will help you understand how this site works and how to post a question — Shail, Feb 28 '13 at 08:36

score 1 · Answer 1 · answered Feb 28 '13 at 08:24

1

You could use:

.inner-boxes {
  float: left;
  width: 30%;
  margin: 0 1.5%;
}

To make each box a third of the width of the container.

answered Feb 28 '13 at 08:24

Tom Walters

15,366
7
57
74

score 1 · Answer 2 · edited May 23 '17 at 12:22

Try to wrap a div inside another div.

code:

     div { border: 2px solid red; } 
     div.wrapper { 
     border: 2px solid blue;
     display: inline-block;

}

Html Code:

    <div class="wrap">
    <div class="wrap">
    <div style="width: 100px; height: 83px;">This is good</div>
    </div>
    </div>

Refer: how to make a div to wrap two float divs inside?,

CSS word-wrapping in div,

How to wrap divs like this?

score 0 · Answer 3 · answered Aug 12 '16 at 07:18

Use display table property

.tbl {
  display: table;
  width: 100%;
}

.tbl .row {
  display: table-row;
}

.tbl .row div {
  display: table-cell;
  background-color: pink;
}

<div class="tbl">
  <div class="row">
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
  </div>
</div>

Multiple div with equal width in a container

3 Answers3