Child div doesn't fit to parent div can't be resolve with font-size:0?

Question

  <div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
       <div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
        <div class="title_1" style="width: 70%;display:inline-block;border-right:solid 1px #ccc;font-size:12px;">
         left box
        </div>

        <div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
         right-box
        </div>
       </div>
    </div>

I have a parent div with width:100% and i want to divide it into two child div with width:70% and width:30% then make it inline. But why my right goes down?

my mistake, i thought you already have added any `reset` or `normalizer`. But it wasn't. The issue is due to `box-sizing` — Deepak Yadav, Jun 16 '17 at 07:51

score 3 · Accepted Answer · answered Jun 16 '17 at 07:47

Use a CSS Reset or set a proper box-sizing property.

* {
  box-sizing: border-box;
}

<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
  <div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
    <div class="title_1" style="width: 70%;display:inline-block;border-right:solid 1px #ccc;font-size:12px;">
      left box
    </div>

    <div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
      right-box
    </div>
  </div>
</div>

Read more about Normalize and CSS-reset

Stack overflow

score 1 · Answer 2 · answered Jun 16 '17 at 07:54

The issue is border-right in class .title_1 if you remove that it align both divs properly and if you want to keep that then use box-sizing:border-box or else reduce the width of .title_1

Remove border-right

<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
  <div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
    <div class="title_1" style="width: 70%;display:inline-block; #ccc;font-size:12px;">
      left box
    </div>

    <div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
      right-box
    </div>
  </div>
</div>

Reduce width

<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
  <div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
    <div class="title_1" style="width: 68%;display:inline-block;border-right:solid 1px; #ccc;font-size:12px;">
      left box
    </div>

    <div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
      right-box
    </div>
  </div>
</div>

Child div doesn't fit to parent div can't be resolve with font-size:0?

2 Answers2