Display Image and Text next to each other HTML - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

Display Image and Text next to each other HTML

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.cf img, .nocf img {
   float:left;
}

.cf div, .nocf div {
   float:left;
}

.cf, .nocf {<!--from  www.j  ava 2  s . co  m-->
   background-color:Chartreuse;
   border:2px solid yellow;
}

h3 {
   clear:both;
}

.cf:before,
.cf:after {
   content:" ";
   display:table;
}

.cf:after {
   clear:both;
}

.cf {
   *zoom:2;
}
</style> 
 </head> 
 <body> 
  <h3>Lorem ipsum</h3> 
  <div class="cf"> 
   <img src="https://www.java2s.com/style/demo/Firefox.png" width="100"> 
   <div>
     Lorem ipsum dolo 
   </div> 
  </div> 
  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molest</h3> 
  <div class="nocf"> 
   <img src="https://www.java2s.com/style/demo/Safari.png" width="100"> 
   <div>
     Lorem ipsum dolo 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials