By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

Three columns , two rows

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.