margin-top not working with clear: both

Answer 1

Sometimes a combination of position relative and margin can solve these type of problems.

I use this technique for my alignright and alignleft classes in WordPress.

For instance if I want a "bottom margin" that is respected by clearing elements you can use.

.alignright{
   float: right;
   margin-left: 20px;
   margin-top: 20px;
   position: relative;
   top: -20px;
}

For your example you could do something like

Left
Right
Main Data