positioning 3 divs in a div

Question

i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con . div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width. i want to position this 3 div look like in the picture.

<div id="apDiv1">
    <div id="div_id_1" class="msg_w_1">
        <div class="pic_con">
            <div class="body_con">small icon"</div>
            <div class="msg_con">hi</div>
        </div>
        <div id="div_id_2" class="msg_w_1">
            <div class="pic_con">
                <div class="body_con">small icon"</div>
                <div class="msg_con">hey this is multiline text</div>
            </div>
        </div>

my css

.pic_con {
    float:left;
    background-color:#096;
}
.back_con {
    float:left;
    background-color:#3CC;
    border:5px solid red;
    width:150;
}
.body_con {
    /*float:left;*/
    margin:0 auto 0 auto;
    background-color:#C39;
    border:5px solid red;
}

i set flote left but it's not work.

Answer 1

As far as I understood you want to align them one after another.

You can manage this, as you tried, by using float: left . Furthermore, you should set the parent div to clear: both .

Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:

HTML

<div id="apDiv1">

<div id="div_id_1" class="msg_w_1">
    <div class="pic_con">pic</div>
    <div class="body_con">small icon</div>
    <div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
    <div class="pic_con"></div>
    <div class="body_con">small icon"</div>
    <div class="msg_con"> hey this is multiline text</div>
</div>
</div>

CSS

.msg_w_1 {
    clear: both;
}

.msg_w_1 div {
    float: left;
}

Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this

Answer 2

use display:table style.

.msg_con {
   display : table
}

this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).