Pages

Thursday, March 22, 2018

How to add an image to the left/ right of a text html









<!doctype html>
<!-- Powered by Computer Master -->
<html>
     <title>
Paragraph and image
</title>
<style>
         *{
   margin:0px ;
   padding:0px; 
   }
   
#container{
       width:90%;
   padding:2%; 
   box-shadow:0px 0px 10px #888888; 
   overflow:auto;  
   margin:10px auto; 
   }
</style>
<body>
<div id="container">
<p style="padding:1%; overflow:hidden;">
    <!-- this image will show at the left of the paragraph -->
<img src="cm.jpg" width="100px" style="float:left;margin-right:10px;"/>
This is a paragraph, and it will show at the right of an image
This is a paragraph, and it will show at the right of an image
This is a paragraph, and it will show at the right of an image
This is a paragraph, and it will show at the right of an image
</p>
<p style=" padding:1%; overflow:hidden;">
<img src="cm.jpg" width="100px" style="float:left;margin-right:10px;"/>
This is a paragraph, and it will show at the right of an image
</p>
<p style=" padding:1%; overflow:hidden;">
<img src="cm.jpg" width="100px" style="float:left;margin-right:10px;"/>
This is a paragraph, and it will show at the right of an image
</p>
<!-- end of container -->
</div>
</body>
</html>

No comments:

Post a Comment