CODEWITHSUNDEEP
htmlcss
Crisis
Crisis

Reputation: 16

Float images on both sides of text

I am trying to get an image to float on both sides of a paragraph. However when I do so, only the left img remains in line while the second simply goes below the text. How would I fix this?

<img class="logo-imgl" src="img/logo.png" height= 300px width= 400px />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p>
<img class="logo-imgr" src="img/logo.png" height= 300px width= 400px />

here is the css:

.logo-imgl{
    float:left;
}
.logo-imgr{
    float:right;
}

Upvotes: 0

Views: 460

Answers (2)

Balvant Ahir
Balvant Ahir

Reputation: 620

TRY THIS IS ON BOOSTRAP

  <div class="container">
      <div class="row">
        <div class="col-md-4">
          <img class="logo-imgl" src="img/logo.png" height="30" width="40" />
        </div>
        <div class="col-md-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p>
        </div>
        <div class="col-md-4">
          <img class="logo-imgl" src="img/logo.png" height="30" width="40" />
        </div>
      </div>
    </div>

Upvotes: 2

omnichad
omnichad

Reputation: 1655

Put both images before the paragraph. I changed both sizes to a width of only 30px to allow it to display correctly in the snippet.

.logo-imgl{
    float:left;
}
.logo-imgr{
    float:right;
}
<img class="logo-imgl" src="img/logo.png" height="30" width="40" />
<img class="logo-imgr" src="img/logo.png" height="30" width="40" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p>

Upvotes: 3

Related Questions