467,161 Members | 1,128 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,161 developers. It's quick & easy.

Three columns , two rows

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>
Apr 9 '07 #1
  • viewed: 7703
Share:
2 Replies
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/

Apr 9 '07 #2
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.
Apr 9 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by CSL | last post: by
4 posts views Thread by Mortar | last post: by
68 posts views Thread by Martin Joergensen | last post: by
reply views Thread by Radu | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.