Why is the text in my div in html not wrapping around my pictures?

user_14595783 0
Viewed 41

For some reason the text in my div#wrapper is not wrapping around the images and is instead ending at the line above the picture and resuming underneath it. I have created classes for the pictures and coded them to float left or right. Here is a picture of what I am talking about. page screenshot

Here is the code.

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Planet Namek</title>
      <link href="css/styles.css" type="text/css"
        rel="stylesheet">     
        </head> 
        <body>
    <div id = wrapper>
    <h1>Welcome to Planet Namek</h1>          
        <h2>headline 2</h2>         
        <p align=left>Contrary to popular belief, Lorem Ipsum is not simply Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis at consectetur lorem donec massa sapien faucibus et molestie. Laoreet non curabitur gravida arcu ac tortor dignissim convallis. Elementum sagittis vitae et leo duis. Volutpat sed cras ornare arcu. Lacus vel facilisis volutpat est. Enim sed faucibus turpis in eu mi bibendum. Pellentesque adipiscing commodo elit at imperdiet. Mi ipsum faucibus vitae aliquet nec. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Aliquam purus sit amet luctus venenatis. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.</p><img class ="right" src="Images/planetnamek.jpg" alt="planet namek">      
        <p align=left>Risus sed vulputate odio ut enim blandit volutpat maecenas. Amet nisl purus in mollis nunc sed id semper risus. Ornare lectus sit amet est placerat in egestas erat imperdiet. Nec feugiat in fermentum posuere urna. Risus nec feugiat in fermentum posuere urna. Fames ac turpis egestas integer eget. Viverra suspendisse potenti nullam ac tortor vitae. Scelerisque eu ultrices vitae auctor. Ultricies tristique nulla aliquet enim. Sed adipiscing diam donec adipiscing. Urna cursus eget nunc scelerisque viverra mauris. Adipiscing bibendum est ultricies integer quis auctor. Malesuada fames ac turpis egestas sed tempus urna. Ligula ullamcorper malesuada proin libero. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Sit amet nisl suscipit adipiscing bibendum est ultricies. Semper risus in hendrerit gravida. Aliquet enim tortor at auctor. Dolor sed viverra ipsum nunc. Accumsan lacus vel facilisis volutpat est velit. <img class ="left" src="Images/namekian.png" alt="namekian"></p>  
    Nisl nisi scelerisque eu ultrices vitae auctor. Eleifend quam adipiscing vitae proin. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat. Elementum nibh tellus molestie nunc non blandit massa enim nec. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Consectetur lorem donec massa sapien faucibus. In ante metus dictum at tempor commodo ullamcorper. Blandit cursus risus at ultrices. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Sed arcu non odio euismod lacinia at. Mattis pellentesque id nibh tortor id aliquet lectus. Nunc eget lorem dolor sed. Id diam maecenas ultricies mi eget mauris pharetra et. Varius sit amet mattis vulputate enim nulla aliquet.             
        </div>
        </body>
        </html>

css here:

 <style>
* {
padding:0;
margin:0;
        }      
header{       
}   
body{
    background-image:url("images/namekbackground.jpg");   
    font-family:Verdana, Helvetica, Sans-seri;
    }            
div#wrapper{
        width:940px;
        margin:30px auto;
        border:1px solid #000;
        word-wrap:break-word;
        overflow: hidden;
        padding:20px;
        color:darkred;            
        background: rgba(10,50,300,.75);     
    }    
img-left{
    float:left;
        margin:0 100px 10px 0;        
        }             
img-right{
    float:right;
    margin: 0 0 10px 100px;
        }               
        p{
            word-wrap:break-word;
            line-height:1.4;
        }                       
</style>
css image html
2 Answers

In your HTML you have your image class as "right and "left"

<img class ="right" src="Images/planetnamek.jpg" alt="planet namek">

However in your CSS you have that class as "img-right" and "img-left". Change your CSS to .left and .right.

.left{
float:left;
    margin:0 100px 10px 0;

    } 
    


.right{
    float:right;
    margin: 0 0 10px 100px;
        }
user_142958960

Use position:absolute in p tag

In Absolute position the element is positioned relative to its first ancestor element that is wrapper class

Below is a code to prove the same

.wrapper {
  font-size: 20px;
  font-family: 'arial';
  text-align: center;
}

p{
position:absolute;
}

.shape {
  
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-color: #58ACFA;
  margin-left: 300px;
}
<div class="wrapper">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="shape"></div>
  </p>
</div>

Admin1
Related