Float right and left are on the same line

mlwacosmos Published at Dev

mlwacosmos

The first image and the file label are on the same line, but the last image is on a second line.

I would like the three items to be on the same line.

Here is my code:

HTML:

<div>
      <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"  
                         title="{% trans %}dialog.pdf.file{% endtrans %}"
                         class="smallImagesFloatLeft"
                         />
      <div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
      <img src="{{asset('bundles/cramifaccueil/images/download.png')}}" 
                        title="{% trans %}download{% endtrans %}"
                        class="smallImagesFloatRight"
                        />
</div>
<div>
      <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}" 
                        title="{% trans %}dialog.pdf.file{% endtrans %}"
                        class="smallImagesFloatLeft"
                        />
      <div class="fileLabel">{% trans %}file.mode.operatoire{% endtrans %}</div>
      <img src="{{asset('bundles/cramifaccueil/images/download.png')}}" 
                        title="{% trans %}download{% endtrans %}"
                        class="smallImagesFloatRight"
                        />
</div>

CSS:

.smallImagesFloatLeft {
  float:left;
  margin-right:5px;
  cursor: default;
}

.smallImagesFloatRight{
  float:right;
}

.fileLabel {
 max-width: 75%;
}

James Montagne

Assuming there is room on one line, you simply need to re-order your elements so that the floats come before the non-floated element:

<div>
      <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"  
                         title="{% trans %}dialog.pdf.file{% endtrans %}"
                         class="smallImagesFloatLeft"
                         />
     <img src="{{asset('bundles/cramifaccueil/images/download.png')}}" 
                        title="{% trans %}download{% endtrans %}"
                        class="smallImagesFloatRight"
                        />
     <div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
</div>

http://jsfiddle.net/o0ksu724/

Collected from the Internet

Please contact [email protected] to delete if infringement.