Why won't the following code do as expected?
Like print Top Three on the top row and bottom three in the bottom row
in that order.
Thanks for any advice.
Kaushal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
div.container
{
width: 1100px;
border: 1px black solid;
margin-left: auto;
margin-right: auto;
}
div.inside
{
float: left;
}
div.top1
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: red;
float: left;
}
div.top2
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: green;
float: left;
}
div.top3
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: blue;
float: left;
clear: right;
}
div.bottom1
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: red;
float: left;
clear: left;
}
div.bottom2
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: green;
float: left;
}
div.bottom3
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="top1">
Top 1
</div>
<div class="top2">
Top 2
</div>
<div class="top3">
Top 3
</div>
<div class="bottom1">
Bottom 1
</div>
<div class="bottom2">
Bottom 2
</div>
<div class="bottom3">
Bottom 3
</div>
</div>
</body>
</html>
