The Web Design Survival Guide | Floats Example 2

by todaly1

HTML

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

CSS

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

.float-left {
width: 72px;
height: 270px;
padding: 10px;
margin-top: 20px;
margin-left: 20px;
float: left;
border: 1px solid #00ffff;
text-align: center;
background-color: #000000;
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";
}