Float:left not working on a dynamic content div - html

Question

I am trying to create a base div where I can copy it as many times as I need for when I want to add new content to my website. So the Html looks like this:
<div class="post">
<p class="date">17/03/1014</p>
<h1>Hello World!</h1>
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl
</p>
</div>
<div class="postImage"><img src="images/car.jpg" width="300" alt="car></div>
Then my css looks like this:
.post{
width:960px;
margin:0 auto;
color:#000;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
/*CSS3*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-outline: 1px dashed #000000;
-moz-outline: 1px dashed #000000;
outline: 1px dashed #000000;
-webkit-outline-offset: -5px;
-moz-outline-offset: -5px;
outline-offset: -5px;
behavior:url(PIE.htc);
}
.post p.postText {
width:500px;
padding-left:10px;
padding-bottom:10px;
}
.post p.date{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding-top:10px;
padding-left:10px;
}
.postImage {
display:block;
float:left;
}
If you test it, the image doesn't float on the right of the text, but instead is below it. Any ideas on what is happening?

Answer 1

Try to start simple - get your positioning correct first, then add in the padding, borders, /CSS3/ stuff. http://jsfiddle.net/bEECn/
There are many ways to accomplish this, but I think wrapping your textual content in a container and floating that may be the most straight forward for you.
<div class="post">
<div class="content-wrap">
<p class="date">17/03/1014</p>
<h1>Hello World!</h1>
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
</div>
<div class="postImage">
<img src="http://lorempixel.com/300/300" width="300" alt="car" />
</div>
</div>
Then, this simple CSS:
.content-wrap, .postImage {
float: left;
}
From there, you can add your additional styles.

Answer 2

If that is your exact HTML, you have several errors. Not sure if that will completely fix your problem, but you need to fix your HTML either way.
<div class="post">
<p class="date">17/03/1014</p> <!-- Was </div> -->
<h1>Hello World!</h1> <!-- Was </div> -->
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
</div> <!-- Was missing -->
<div class="postImage">
<img src="images/car.jpg" width="300" alt="car>
</div>

Answer 3

I made a JSFiddle for you.
http://jsfiddle.net/FRDKL/
I found allot of HTML errors for example:
<img src="images/car.jpg" width="300" alt="car>
U forgot an " at the end of your ALT. I hope this helps:
http://jsfiddle.net/FRDKL/