align this text next to the image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

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

Description

align this text next to the image

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">
body {<!--   w w w. java2  s  .  co  m-->
   font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}

.container {
   margin:0 auto;
   width:621px;
}

article {
   background-color:Chartreuse;
   border-color:yellow;
   border:2px solid blue;
   margin-bottom:21px;
   padding:11px;
   margin:0;
}

.trophies {
   width:601px;
}

.trophy {
   border:2px solid;
   box-shadow:6px 6px 6px pink;
   height:73px;
   margin-bottom:11px;
   position:relative;
}

.trophy-image {
   background-color:OrangeRed;
   margin:9px;
   height:57px;
   float:left;
}

.trophy-info {
   background-color:grey;
   float:left;
   margin:9px;
   line-height:29px;
}

.trophy-title {
   font-weight:bold;
}

.trophy-description {
}
.trophy-type {
   background-color:BlueViolet;
}

article img {
   border:2px solid Chartreuse;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <article> 
    <div class="trophies"> 
     <div class="trophy"> 
      <div class="trophy-image"> 
       <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
      </div> 
      <div class="trophy-info"> 
       <div class="trophy-title">
         Lorem ipsum dolor 
       </div> 
       <div class="trophy-description">
         Lorem ipsum dolor sit 
       </div> 
      </div> 
      <div class="trophy-image"> 
       <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
      </div> 
     </div> 
    </div> 
   </article> 
   <article> 
    <div class="trophies"> 
     <div class="trophy"> 
      <div class="trophy-image"> 
       <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
      </div> 
      <div class="trophy-info"> 
       <div class="trophy-title">
         Lorem ipsum dolor 
       </div> 
       <div class="trophy-description">
         Lorem ipsum dolor sit 
       </div> 
      </div> 
      <div class="trophy-image"> 
       <img src="https://www.java2s.com/style/demo/Safari.png"> 
      </div> 
     </div> 
    </div> 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials