Display two box inline

Question

I want to display two boxes inline. I tried a lot to solve it.

.checks {
    width:100%;
}
.moinfo {
    background:#F29400;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important;
    padding-bottom:20px;
    height:300px;
    display:inline-block;
}
.role {
    background:green;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important;
    padding-bottom:20px;
    height:300px;
}
.hmovie {
    border-bottom:3px dotted #93117E;
    color:white;
    width:200px;
}
.cat {
    float:left;
    width:100%;
    padding-bottom:3px;
    border-bottom:2px dotted white;
}
.cat {
    float:left;
    width:100%;
    padding-bottom:3px;
}
.subcat {
    float:left;
    width:40%;
}
.dcont {
    float:left;
    width:60%;
}

<div class='checks'>
    <div class='moinfo'>
         <h2 class='hmovie'>Movie Information</h2>

        <div class='cat'>
            <div class='subcat'>Genre:</div>
            <div class='dcont'>".$dummy[0]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Year:</div>
            <div class='dcont'>".$dummy[1]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Running Time:</div>
            <div class='dcont'>".$dummy[2]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Language:</div>
            <div class='dcont'>".$dummy[3]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Subtitles:</div>
            <div class='dcont'>".$dummy[4]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Country:</div>
            <div class='dcont'>".$dummy[5]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Awards:</div>
            <div class='dcont'>".$dummy[6]."</div>
        </div>
    </div>
    <div class='role'>
         <h2 class='hmovie'>Cast Information</h2>

        <div class='cat'>
            <div class='subcat'>Cast:</div>
            <div class='dcont'>".$dummy[7]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Director:</div>
            <div class='dcont'>".$dummy[8]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Writer:</div>
            <div class='dcont'>".$dummy[9]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Producers:</div>
            <div class='dcont'>".$dummy[10]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Music:</div>
            <div class='dcont'>".$dummy[11]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Cinematography:</div>
            <div class='dcont'>".$dummy[12]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Editor:</div>
            <div class='dcont'>".$dummy[13]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Sound:</div>
            <div class='dcont'>".$dummy[13]."</div>
        </div>
    </div>
</div>

JSFiddle Demo

Any help will be appreciated.

use float:left in both classes CSS and if you worte clear:both... remove that — DeDevelopers, Sep 26 '14 at 11:29

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

Since you have applied padding, the effective total width of both <div>'s with width 50% will be more than 100%. You can Apply box-sizing:border-box for both the <div>s to include the padding while calculating the width and height.

Still, inline-block elements will respect the linebreaks in your HTML which will be converted to a white space, Breaking your 100% total again. You can either try fixing it using these hackish methods, Or you can simply float them left and right respectively instead.

.checks {
    width:100%;
}
.moinfo {
    box-sizing:border-box;
    float:left;
    background:#F29400;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important;
    padding-bottom:20px;
    height:300px;
}
.role {
    box-sizing:border-box;
    float:right;
    background:green;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important;
    padding-bottom:20px;
    height:300px;
}
.hmovie {
    border-bottom:3px dotted #93117E;
    color:white;
    width:200px;
}
.cat {
    float:left;
    width:100%;
    padding-bottom:3px;
    border-bottom:2px dotted white;
}
.cat {
    float:left;
    width:100%;
    padding-bottom:3px;
}
.subcat {
    float:left;
    width:40%;
}
.dcont {
    float:left;
    width:60%;
}

<div class='checks'>
    <div class='moinfo'>
        <h2 class='hmovie'>Movie Information</h2>
        <div class='cat'>
            <div class='subcat'>Genre:</div>
            <div class='dcont'>".$dummy[0]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Year:</div>
            <div class='dcont'>".$dummy[1]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Running Time:</div>
            <div class='dcont'>".$dummy[2]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Language:</div>
            <div class='dcont'>".$dummy[3]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Subtitles:</div>
            <div class='dcont'>".$dummy[4]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Country:</div>
            <div class='dcont'>".$dummy[5]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Awards:</div>
            <div class='dcont'>".$dummy[6]."</div>
        </div>
    </div>
    <div class='role'>
        <h2 class='hmovie'>Cast Information</h2>
        <div class='cat'>
            <div class='subcat'>Cast:</div>
            <div class='dcont'>".$dummy[7]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Director:</div>
            <div class='dcont'>".$dummy[8]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Writer:</div>
            <div class='dcont'>".$dummy[9]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Producers:</div>
            <div class='dcont'>".$dummy[10]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Music:</div>
            <div class='dcont'>".$dummy[11]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Cinematography:</div>
            <div class='dcont'>".$dummy[12]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Editor:</div>
            <div class='dcont'>".$dummy[13]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Sound:</div>
            <div class='dcont'>".$dummy[13]."</div>
        </div>
    </div>
</div>

score 1 · Accepted Answer · edited Sep 26 '14 at 11:46

You need to add display:inline-flex to your .checks.

.checks {
  width: 100%;
  display: inline-flex;
}
.moinfo {
  background: #F29400;
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 30px;
  color: white !important;
  padding-bottom: 20px;
  height: 300px;
  display: inline-block;
}
.role {
  background: green;
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 30px;
  color: white !important;
  padding-bottom: 20px;
  height: 300px;
}
.hmovie {
  border-bottom: 3px dotted #93117E;
  color: white;
  width: 200px;
}
.cat {
  float: left;
  width: 100%;
  padding-bottom: 3px;
  border-bottom: 2px dotted white;
}
.cat {
  float: left;
  width: 100%;
  padding-bottom: 3px;
}
.subcat {
  float: left;
  width: 40%;
}
.dcont {
  float: left;
  width: 60%;
}

<div class='checks'>
  <div class='moinfo'>
    <h2 class='hmovie'>Movie Information</h2>
    <div class='cat'>
      <div class='subcat'>Genre:</div>
      <div class='dcont'>".$dummy[0]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Year:</div>
      <div class='dcont'>".$dummy[1]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Running Time:</div>
      <div class='dcont'>".$dummy[2]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Language:</div>
      <div class='dcont'>".$dummy[3]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Subtitles:</div>
      <div class='dcont'>".$dummy[4]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Country:</div>
      <div class='dcont'>".$dummy[5]."</div>
    </div>
    <div class='lcat'>
      <div class='subcat'>Awards:</div>
      <div class='dcont'>".$dummy[6]."</div>
    </div>
  </div>

  <div class='role'>
    <h2 class='hmovie'>Cast Information</h2>
    <div class='cat'>
      <div class='subcat'>Cast:</div>
      <div class='dcont'>".$dummy[7]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Director:</div>
      <div class='dcont'>".$dummy[8]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Writer:</div>
      <div class='dcont'>".$dummy[9]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Producers:</div>
      <div class='dcont'>".$dummy[10]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Music:</div>
      <div class='dcont'>".$dummy[11]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Cinematography:</div>
      <div class='dcont'>".$dummy[12]."</div>
    </div>
    <div class='lcat'>
      <div class='subcat'>Editor:</div>
      <div class='dcont'>".$dummy[13]."</div>
    </div>
    <div class='lcat'>
      <div class='subcat'>Sound:</div>
      <div class='dcont'>".$dummy[13]."</div>
    </div>
  </div>
</div>

It was working perfectly fine in Firefox. I have not tested in Chrome. Then @Twix should look for other answer. — Rohil_PHPBeginner, Sep 26 '14 at 12:20

ValentinVoilean · Answer 3 · 2014-09-26T12:00:40.193

There are 2 ways to do this:

You need to add "display:inline-block" to the second element + "box-sizing: border-box;" to both elements in order to include the padding in the "50%" width.

Your code should look like this:

.moreinfo{ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display:inline-block;
    width:50%;
}

Remove the display property and add "float:left" (this will actually change the display to block); Add "overflow:hidden" to the parent. http://jsfiddle.net/7jeye9y6/7/

score 0 · Answer 4 · answered Sep 26 '14 at 11:28

0

you need to add display:inline-block to second box, and change width of boxes

http://jsfiddle.net/7jeye9y6/2

answered Sep 26 '14 at 11:28

Paweł

409
3
13

The `
`s in actual demo have `50%` width each, not `45%`.
– T J Sep 26 '14 at 11:54
as i wrote "and change width of boxes" – Paweł Sep 26 '14 at 12:54

score 0 · Answer 5 · answered Sep 26 '14 at 11:29

0

Just add display inline flex to you .checks class and -webkit-inline-flex if safari

.checks{ 
    width:100%;
    display:inline-flex;
}

answered Sep 26 '14 at 11:29

user28470

419
5
17

score 0 · Answer 6 · answered Sep 26 '14 at 11:31

You need to use display:inline-block for both the div. Also use box-sizing:border-box to calculate excess padding. Update your CSS like below.

 .moinfo{ 
    background:#F29400;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important ;
    padding-bottom:20px;
    height:300px;
    display:inline-block;
    font-size: 14px;
    box-sizing:border-box;    
 }

.role{ 
    background:green;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important ;
    padding-bottom:20px;
    height:300px;
    font-size: 14px;
    display:inline-block;
    box-sizing:border-box;
  }

DEMO

score 0 · Answer 7 · answered Sep 26 '14 at 11:34

You are using 50% 50% and placing paddings left and right of 10px; this makes it more than 100%; also, either you choose float:left; or display:inline;

This Made them displayed inline:

        .moinfo{ 
            background:#F29400;
            width:46%;
            margin:0px;
            padding-left:2%;
            padding-right:2%;
            margin-top:30px;
            color: white !important ;
            padding-bottom:20px;
            height:300px;
            display:inline-block;
            float:left;

        }

        .role{ 
        margin:0px;
            background:green;
            width:46%;
            padding-left:2%;
            padding-right:2%;
            margin-top:30px;
            color: white !important ;
            padding-bottom:20px;
            height:300px;
            float:left;
        }

score 0 · Answer 8 · answered Sep 26 '14 at 11:37

0

Add this into your .moinfo and .role

display:inline-block;
box-sizing:border-box;

answered Sep 26 '14 at 11:37

Fergoso

1,584
3
21
44

Display two box inline

8 Answers8