Create columns floating left in HTML and CSS

Description

The following code shows how to create columns floating left.

Example


<!--   w  w  w.j av  a 2  s.  c o  m-->
<html>
<head>
<title>Layout Example</title>
<style type='text/css'>
body {
margin:0px;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;}

#header {
background-color:#cccccc;
padding:10px;
height:120px;}

#navigation {
background-color:#efefef;
padding:10px;
height:40px;}

#footer {
background-color:#cccccc;
padding:10px;
height:40px;
clear:both;
border-top:20px solid #ffffff;}

.column1of3, .column2of3, .column3of3 {
float:left;
width:28%;
margin-left:2%;
background-color:#cccccc;
padding:1%;
margin-top:20px;
height:175px;}
</style>

</head>
<body>
<div id="header">header</div>
<div id="navigation">navigation</div>
<div class="column1of3">column 1 of 3</div>
<div class="column2of3">column 2 of 3</div>
<div class="column3of3">column 3 of 3</div>
<div id="footer">footer</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Create columns floating left in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Float

HTML CSS Tutorial Float

Create columns floating left in HTML and CS...

Float div left with width and height settin...
Float left and right for three columns layo...
Float left and right with other content in ...
Float left in HTML and CSS
Float right in HTML and CSS
Float right inside a container in HTML and ...
Make list item float left in HTML and CSS
Use floating elements to create columns in ...