Question

I have two block elements. The first is floated to the left. I’d expect the right element to be a block as well and retain its square shape. Instead, text within it is wrapping under the element which is floating to the left.

.comment-date {
  float: left;
}

<div class="comment-date">07/08 23:08</div>
<div class="comment-body">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</div>

The lorem ipsum text wraps under the date. I’d expect it to retain a block shape, floating to the right of the date. How can I achieve that?

Here is a fiddle:
http://jsfiddle.net/CS2Hs/

Answer 1

An alternative to the other solutions here would be to simply add a margin-left to .comment-body. It would also be helpful to apply a set width to .comment-date

.comment-date { 
  float: left;     
  font-weight: bold;    
  width: 90px;
}
.comment-body {
  margin-left: 90px;
}

This will ensure that the text in .comment-body does not appear underneath the date.

Here is a demo:

— jsFiddle DEMO —