CSS for Display Suite Fields not applied

Question

I'm attempting to place text next to the top of images inline for a content type using CSS on fields through Display Suite with a built-in layout in Panels (Two column bricks)

I am using a subtheme for the professional_theme.

• I have tested and ensured the style sheet is over-ridden to my subtheme

• I have inserted the css shown below (and tried several other css codes)

• I have inserted the css names into the CSS Classes of Display Suite

• I tried applying the styles to several different fields as well as the region independently and together.

That all being said I think there is extra CSS code being inserted that is throwing off the style being pulled in but I have no idea where it is coming from.

The code below displays Source Code with the CSS style I applied to the image and a text field: The names of the only styles I applied are: .floatleft .floatright

<div id="block-system-main" class="block block-system">


<div class="content">
<div class="panel-display panel-2col-bricks clearfix" >
<div class="panel-panel panel-col-top">
<div class="inside"><div class="field field-name-title field-type-ds field-label-hidden">
<div class="field-items"><div class="field-item even"><h2>Are you the Kind to be Kind</h2></div></div></div><div class="field field-name-field-date-good-news field-type-datetime field-label-hidden">

<div class="field-items"><div class="field-item even"><span class="date-display-single">Tuesday, October 27, 2015 - 09:30</span></div></div></div>
<div class="field field-name-field-image-positive-news .floatright"><img src=".../sites/default/files/styles/medium/public/positivenews/476950.jpg?itok=uIGCBUH2" width="220" height="165" alt="" /></div>
<div class="field field-name-field-inspirational-thought-oday field-type-text-long field-label-hidden .floatleft"><div class="field-items"><div class="field-item even"><p>You are in charge of your own destiny, don’t try to control theirs.</p>
</div></div></div></div>
</div>

CSS CODE: Keep in mind that I have tried other CSS codes

.floatleft {
clear: both;
vertical-align: top;
float: left;
padding: 4px 10px 4px 0;
}

.floatright {
clear: both;
vertical-align: top;
float: right;
padding: 4px 0 4px 10px;
}

Any help is greatly appreciated. I tried finding CSS documentation for Display Suite with little luck. WO

Answer 1

First of all, remove the . from your classes in your HTML code, e.g. you should have <div class="floatright"> and not <div class=".floatright">.

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.