Fluid Layout with float : float layout : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » float layout »

 

Fluid Layout with float


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css" media="Screen">
body {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

div {
  background-color: gold;
  margin-right: 10px;
  padding: 5px;
  border-left: 1px solid gray;
  border-right: 2px solid black;
  border-top: 1px solid gray;
  border-bottom: 2px solid black;
}

#section1 {
  float: left;
  width: 20%;
  min-width: 170px;
  background: pink;
}

#section2 {
  float: left;
  width: 40%;
  min-width: 170px;
  background: red;
}

#section3 {
  float: left;
  width: 20%;
  min-width: 170px;
  background: yellow;
}
</style>
</head>
<body>

<div id="section1"
    <h2>A</h2> 
    <p>20% of container's width.</p>
</div> 

<div id="section2"
    <h2>B</h2> 
    <p>40% of container's width.</p>
</div> 

<div id="section3"
    <h2>C</h2> 
    <p>20% of container's width.</p>
</div> 

</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» float layout