Three columns , two rows

Kaushal Shah

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>

Jukka K. Korpela

Scripsit Kaushal Shah:

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.

On IE 7, the first three blocks and the last two blocks appear as one row,
and the fourth block below them. This is odd, and it appears to be a browser
bug. On Firefox, I get the desired table-like appearance.

In practice, if you need something really table-like, maybe you _have_ a
table and could use table markup in CSS. Otherwise, you might find
positioning easier to use consistently (setting position: relative for the
outer div and then positioning the inner div elements "absolutely"
relatively to the outer div).

Anyway, the bug seems to disappear in IE 7 if I add an artificial empty div
element after the third div element:
<div style="clear: left"></div>

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Kaushal Shah

Jukka K. Korpela wrote:

Scripsit Kaushal Shah:

>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.

On IE 7, the first three blocks and the last two blocks appear as one
row, and the fourth block below them. This is odd, and it appears to be
a browser bug. On Firefox, I get the desired table-like appearance.

In practice, if you need something really table-like, maybe you _have_ a
table and could use table markup in CSS. Otherwise, you might find
positioning easier to use consistently (setting position: relative for
the outer div and then positioning the inner div elements "absolutely"
relatively to the outer div).

Anyway, the bug seems to disappear in IE 7 if I add an artificial empty
div element after the third div element:
<div style="clear: left"></div>

Ok Thanks for the information.

Three columns , two rows

This discussion thread is closed

Similar topics