How to show two div in one line - html

Question

i have two div like this :-
<div class="pdetails">
<div class="contact_details">
text
</div>
<div class="clear"></div>
<div id="contact_area_form_" class="tform_wrapper">
text
</div>
</div>
the parent div is pdetails and it have two div (contact_details,tform_wrapper),my problem is the div contact_details show in top and the div tform_wrapper show in bottom.
how can i set this two div in the same line.
css code :-
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 510px;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float: right;
}

Answer 1

Remove div which have "clear" class or hide this with display:none.
<div class="pdetails">
<div class="contact_details"> text </div>
<div id="contact_area_form_" class="tform_wrapper"> text </div>
</div>
or use width in % value.
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 80%;
}

Answer 2

For me they show up in one line. Only when the window size is not big enough for both of them to fit, they will be shown in a vertical alignment. You could give the parent-div a fixed width to avoid that problem. Then in case of a small window size a scrollbar would show up.

Answer 3

I would go something like this: http://jsfiddle.net/Ewyzt/
the clear in between is the one saying there cant be more on this line and pushed the other box down what you want to do is clear after the last box so you can build after the two first boxes otherwise things will start to float u besides them.
.tform_wrapper {
padding-top: 10px;
width: 510px;
background: red;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float:left;
}

Answer 4

I would like to suggest to use display: inline-block; property instead of float
Demo for display: inline-block