margin property not working for text div

Question

I am trying to move the text .col-6 .about to the right of the image but nothing is working.

Here is my code: http://jsfiddle.net/M4rDD/

CSS

.mainInfo
{
    height:500px;
    background-color: pink;

}

.col-6 .imagePlaceholder
{
    float: left;
    width:300px;
    height:420px;
    margin:30px 0 30px 30px;    
    background-color: red;
}

.col-6 .about
{
    display: block;
    margin-left:100px;
    padding:1em;
}

Answer 1

try using css parameters such as :

position:absolute

for the objects you need to move, and then values as left:00px and right:00px.

Use position:relative for the main wrapper div.

p.s. i rarely use margin value for div, because it's interpreted on different ways across different browsers.

Answer 2

because the floated red div is taken out of the document flow and although the text surrounds the floated red div, the margin is still calculated against the parent col-6 which has the width of 100% (display:block) of the mainInfo). So you have to set the margin-left larger than the width of the floated red div (which is 300px). In this case you may have to set the margin-left to 400px:

.col-6 .about {
  display: block;
  margin-left:400px;
  padding:1em;
}

I added this answer to show that the margin-left still works. You can also set the margin for the floated red div instead (like JunM posted as a comment).

Here is the updated demo.