how to set the child two div 50%, 50% with the parent div

Question

I have following kind of pattern. How to apply a css changes for first and second childDiv class to 50% to the parent div

How do I set 50%, 50% to the child div?

<div class="parentDiv">
    <div class="childDiv">   // 50% width
   </div>
   <div class="childDiv">   // 50% width
   </div>
</div>

Answer 1

.childDiv{
   display:inline-block;
   width:50%;
}

Example

Important notes:

1. don't leave whitespaces between the divs
2. You might as well use floats instead of display:inline-block;
3. If the elements don't align in the example, you browser does not support box-sizing, just omit the border then (it was for illustration purposes only).

Answer 2

There's a bit of a trick here, of which you need to be aware. If you put any whitespace between the closing of the first div and the opening of the second, your 50% won't work because of the space being displayed in the browser.

There are a couple ways to do this. If you are targetting only modern browsers (IE9+, FF, Chrome, Safari), you can use inline-block:

<style>
    .childDiv {
        display: inline-block;
        width: 50%;
    }
</style>

<div class="parentDiv">
    <div class="childDiv">   // 50% width
    </div><div class="childDiv">   // 50% width
    </div>
</div>

However, IE7 doesn't support inline-block, so you can go to the "old-school" method, using floats:

<style>
    .childDiv {
        float: left;
        width: 50%;
    }
</style>

<div class="parentDiv">
    <div class="childDiv">   // 50% width
    </div><div class="childDiv">   // 50% width
    </div>
    <div style="clear: both"></div>
</div>

If you want to ensure both columns are exactly the same width and still have a small gap between them, use different styles of floats. Note this method doesn't require that you eliminate whitespace in your markup between divs, as long as the width you use is less than 50%:

<style>
    .childDiv {
        width: 49.5%;
    }
    .left { float: left; }
    .right{ float: right; }
</style>

<div class="parentDiv">
    <div class="childDiv left">   // 49.5% width
    </div>
    <div class="childDiv right">   // 49.5% width
    </div>
    <div style="clear: both"></div>
</div>