Get right column to be next to left column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

Get right column to be next to left column

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">

.columnsContainer {<!--  www .  jav a2 s  .c  o m-->
   min-width: 960px;
   position: relative;
   margin: 0 auto;
}
.Column {
   border: 1px solid #ccc;
   margin-bottom: .5em;
   float: left;
}


      </style> 
 </head> 
 <body> 
  <div class="columnsContainer"> 
   <div class="Column"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" width="480" height="480"> 
   </div> 
   <div class="Column"> 
    <h2> <img src="https://www.java2s.com/style/demo/Opera.png" width="480" height="480"> </h2> 
   </div> 
  </div> 
  <p> </p> 
  <div class="columnsContainer"> 
   <div class="Column"> 
    <h2> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" width="480" height="480"> </h2> 
   </div> 
   <div class="Column"> 
    <h2> <img src="https://www.java2s.com/style/demo/Opera.png" width="480" height="480"> </h2> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials