How to display block inline?

I am working on a page where I have to divide the description boxes(named block2 here) into four groups and display 2 of them on each line. I added display:inline; tag to block2 but still each of the block is being displayed on a new line. I will be very thankful if anyone could help me out. Thanks Here is my code,

.block2{
    width:auto;
    float:left;
    display:inline;
    background-color:#ECECEC;
    paddi开发者_如何学编程ng:17px 13px 21px 22px;
    margin:6px 6px 0 0;
    color:#636363
}
.block2 p{
    width:462px; 
    height:400px;  <!-- Height of the box containing details(one for all) -->
    float:left;
    padding:19px 0 13px 16px;
}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

And below is its HTML,

        <div class="block2">

                Provide here the details about first member 

        </div>

    <div class="block2">

            Member 2's details
        </div>

<div class="block2">



            Member 3's details

    </div>

<div class="block2">

            Member 4's details

    </div>

If you are looking for the rule display: inline-block. There it is. But I should warn you that it can be a very touchy rule that is affected by white space in your HTML.

But if you are just trying to stop the overlap, try removing display:inline; from your .block2 CSS rule.

Instead of using width for <p> tag you can use it for <div>. I have set <div>'s width to 300px because of padding and margin you have used (also the width exceeded the containers width) other wise you can set width to 50% which then automatically displays two <div>s in a line.

.block2{
    width:300px;
    float:left;
    display:inline;
    background-color:#ECECEC;
    padding:17px 13px 21px 22px;
    margin:6px 6px 0 0;
    color:#636363;
    border:1px solid red;
}
.block2 p{
    height:400px;  
    float:left;
    padding:19px 0 13px 16px;
    border:1px solid red;
}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

Here is how I would prefer to do and I hope this helps you.

.block2{
    width:50%;
    float:left;
    display:inline;
    background-color:#ECECEC;
    color:#636363;

}
.block2 p{
    height:400px;  
    float:left;
    padding:19px 0 13px 16px;
    border:1px solid red;

}
.block2 p img{
float:left;
margin:0 10px 7px 0
}

<div class="block2"><p>Provide here the details about first member </p></div>
<div class="block2"><p>Member 2's details</p></div>
<div class="block2"><p>Member 3's details</p></div>
<div class="block2"><p>Member 4's details</p></div>

It appears to have been a simple padding issue, where the width caused it to overflow. Glad I helped!