CODEWITHSUNDEEP
html
Arikakate
Arikakate

Reputation: 93

how to make text go beside the image properly

I'm fairly new to HTML and am trying to make a bread website, in the website I want to have a paragraph beside my image. When attempting this I found that the paragraph get stuck to the right of the image. My question is how would I make the text go to the other side of the image. Here is my code and website.

<main>
  <body> 
    <img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="480" height="300" align="left" >
     <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</p> 
  </body>
</main>

enter image description here

Upvotes: 0

Views: 58

Answers (2)

Lew Perren
Lew Perren

Reputation: 1239

Use a combination of nested div tags with class links to css, as follows:

<html>
<head>
<style>
  
.col {
  float: left;
   width: 50%;
    }
   
</style>

</head>

<body> 
  

    <div >
    <div class="col">
        <img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="480" height="300" align="left" >
        </div>
        
    <div class="col">
      Lorem ipsum dolor sit amet...
    </div>
    
    </div>
    
    </body>
    </html>

See: w3schools

Upvotes: 1

Dominik
Dominik

Reputation: 6313

A quick mock up below. Please note that I fixed your HTML where the <body> tag is the outer most tag. You will likely need another tag (<section> or <article>) and attach the CSS to a class.

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  margin-top: 0;
}
<body>
 <main> 
   <img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="480" height="300" align="left" >
   <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</p> 
 </main>
</body>

Upvotes: 1

Related Questions