Text wrapping around image

HTML & CSS
1

I have a small project that I am working on and the text keeps wrapping around the image.

Here is my code:

<div class="text">​​​​​​​​ 
   <img src="/square.png" align="left" class="ms" alt=""/>
</div>
<div> 
   <span class="ms">Two paragraphs of text</span> 
</div>

This is what I need:
Desktop:
[PICTURE][TEXT]

As soon as you move responsively to mobile:
[PICTURE]
[TEXT]

Any input would be highly appreciated.

2

Hi @eventsinstlouis and welcome to the forums.

Have you tried CSS float:left on the container divs? Not 100% sure but I think this might do what you’re after.
Hope it helps…

Andres

3

Not an answer to your question, but why are you using <span></span> tags for “Two paragraphs of text”? Use <p></p> tags for paragraphs,

AS @Andres_Vaquero says, you can float the image at desktop widths to get the text to sit next to it, then give it display:block at narrower widths to place the text below it. Unless there’s another issue you haven’t mentioned, you don’t need to wrap the image and text in <div> tags for this.

4

Hi there eventsinstlouis,

and a warm welcome to these forums. :winky:

I have taken a guess at your actual requirements…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
#container {
    display: table;
    max-width: 64em;
    margin: auto;
    border: 1px solid #999;
    box-sizing: border-box;
    background-color: #fff;
 }
 
#container div {
    display: table-cell;
    padding: 0.5em;
    vertical-align: top;
 }

#container img {
    display: block;
    border: 0.25em solid #000;
 }

@media ( max-width: 30em ) {

#container {
    display: block;
    padding: 0.5em;
  }
 
#container div {
    display: block;
    width: 94%;
    max-width: 16.25em; 
    margin: auto;
    padding: 0;
  }

#container img {
    width: 100%;
    height: auto;
  }	
 }
</style>

</head>
<body> 

<div id="container">

 <div>
  <img src="http://placehold.it/244x222" width="244" height="222" alt="image description">
 </div><div>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
   Curabitur sit amet sem sed libero bibendum tempus faucibus       
   quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
   nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
   interdum justo ac justo vehicula consequat.
  </p><p>
   Donec vehicula diam non leo efficitur, id euismod odio 
   tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
   et libero non diam tempor sagittis. Quisque vel egestas 
   ipsum. Integer sed elit eu orci blandit commodo in in erat.
  </p>   
 </div>
 
<!-- #container --></div>

</body>
</html>

coothead

1 Like
5

Wow, it works perfectly! Thanks so much coothead!

6

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.