The Web Design Survival Guide | Floats Example 1

by todaly1

HTML

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 <link rel="stylesheet" href="css-box-model-4.css">
 </head>
 <body>
   <div class="box-4-parent-element">Box 4<br>     
     <div class="box-1-float-left">Box 1</div>
     <div class="box-2-float-right">Box 2</div>
     <div class="box-3-clear-both">Box 3</div>
   </div>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

.box-1-float-left {
   width: 140px;
   height: 200px;
   padding: 10px;
   margin-top: 20px;
   margin-left: 40px;
   margin-bottom: 10px;
   float: left;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #000000;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif"; 
 }
   
 .box-2-float-right {
   width: 80px;
   height: 200px;
   padding: 10px;
   margin-top: 20px;
   margin-right: 40px;
   margin-bottom: 10px;
   float: right;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #000000;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
 } 

 .box-3-clear-both {
   width: 260px;
   height: 30px;
   padding: 10px;
   margin-right: auto;
   margin-left: auto;
   clear: both;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #888888;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
 }

 .box-4-parent-element {
   width: 360px;
   height: 360px;
   padding: 10px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #cccccc;
   color: #000000;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
 }