CSS for Display Suite Fields not applied
First of all, remove the . from your classes in your HTML code, e.g. you should have &lt;div class="floatright"&gt; and not &lt;div class=".floatright"&gt;.

If you want to have one element next to another by using float, your combined element's width should be smaller than their container's. And since both your image and the text are inside divs and a div has 100% width by default, you have to specify a smaller width to each.

.floatleft {
    float: left;
    width: 40%;
}

.floatright {
    float: right;
    width: 30%;
}


Just change the widths accordingly.