Create 4 div boxes floating next to each other in the same line - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Float

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

Description

Create 4 div boxes floating next to each other in the same line

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">
section {<!--from  w w w .ja  v a  2s.c o m-->
   width:100%;
}

section article {
   width:1001px;
   padding:21px;
   margin:auto;
}

.hi1-4-container,
.hi2-4-container,
.hi3-4-container,
.hi4-4-container {
   float:left;
}

.hi1-4-container {
   width:25%;
}

.hi2-4-container {
   width:50%;
}

.hi3-4-container {
   width:75%;
}

.hi4-4-container {
   width:100%;
}

.hi1-4-container p strong,
.hi2-4-container p strong,
.hi3-4-container p strong,
.hi4-4-container p strong {
   color:Chartreuse;
}

.hi1-4-container p,
.hi2-4-container p,
.hi3-4-container p,
.hi4-4-container p {
   color:yellow;
}
</style> 
 </head> 
 <body> 
  <section> 
   <article> 
    <div class="hi1-4-container"> 
     <p> <strong>test</strong> </p> 
     <p> test <br> test </p> 
    </div> 
    <div class="hi1-4-container"> 
     <p> <strong>test</strong> </p> 
     <p> test <br> test </p> 
    </div> 
    <div class="hi1-4-container"> 
     <p> <strong>test</strong> </p> 
     <p> test <br> test </p> 
    </div> 
    <div class="hi1-4-container"> 
     <p> <strong>test</strong> </p> 
     <p> test <br> test </p> 
    </div> 
   </article> 
  </section>  
 </body>
</html>

Related Tutorials