CODEWITHSUNDEEP
htmlcss
RaymondNelson
RaymondNelson

Reputation: 121

How can I make my image wrap around my text?

Basically, I have created a simple website with the use of HTML and CSS. I have an image at the bottom of my div. I want it to wrap around the text in the 3rd section titled "Lorem Ipsum." How can I so this? Any help would be appreciated, thanks, Here is my code.

HTML

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="bio">
    <h1 class="bio-content">Lorem Ipsum</h1>
    <br>
    <h3 class="bio-sub"><u>Lorem Ipsum:</u></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <br>
    <h3 class="bio-sub"><u>Lorem Ipsum:</u></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <br>
    <h3 class="bio-sub"><u>Lorem Ipsumm:</u></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <img class ="nature" src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" width="500px" height="333px">
      
    </div>
  </div> 
    <script src="script.js"></script>
  </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body{
    min-height: 200vh;
}

#bio{
    padding: 30px;
    line-height: 150%;
    font-size: 1.3em;
    margin-top: 0;
    text-align: left;
    background-color: #f5f4f4;
    overflow: hidden;
    border: solid #bebebe 4px;
  } 

  .bio-content{
    position: relative;
    top: -15px;
    padding: 20px;
    text-align: center;
    font-size: 50px;
  }

  .bio-sub{
    position: relative;
    top: -25px;
    padding: 20px;
    text-align: center;
    font-size: 40px;
  }

Upvotes: 0

Views: 53

Answers (1)

Pay it forward
Pay it forward

Reputation: 461

As @Brian pointed in his comment earlier, you can use float to wrap the text to the right of the image or to the left of the image. I don't believe there is a simple CSS setting that is cross-browser compatible to wrap the text on both sides of an image.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body{
    min-height: 200vh;
}

.nature {
  float : left;
  margin: 10px 20px 0px 0px; /* Top Right Bottom Left*/
}

#bio{
    padding: 30px;
    line-height: 150%;
    font-size: 1.3em;
    margin-top: 0;
    text-align: left;
    background-color: #f5f4f4;
    overflow: hidden;
    border: solid #bebebe 4px;
  } 

  .bio-content{
    position: relative;
    top: -15px;
    padding: 20px;
    text-align: center;
    font-size: 50px;
  }

  .bio-sub{
    position: relative;
    top: -25px;
    padding: 20px;
    text-align: center;
    font-size: 40px;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="bio">
    <h1 class="bio-content">Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <br>
    <h3 class="bio-sub"><u>Lorem Ipsumm:</u></h3>
    <img class ="nature" src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" width="250px">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
  </body>
</html>

Upvotes: 1

Related Questions