CSS for 2 row and 2 col layout

[Peter Foti]

I want to create a 2 row and 2 column layout (without using tables... even
though the resulting code looks very table-like). Here's the sample HTML
code I have so far:

<div class="row">
<div class="col1">Top Left</div>
<div class="col2">Top Right<br><br><br>Still here</div>
</div>
<div class="row">
<div class="col1">Bottom left</div>
<div class="col2">Bottom right</div>
</div>

And here's the styles applied:

..row { display: block; }
..col1 { border: 1px solid blue; background-color: #eee; float: left; width:
100px; margin: 0; padding: 0;}
..col2 { border: 1px solid red; background-color: #ddd; width: 100px; margin:
0; padding: 0; }

IE displays the results close to what I would expect (though there is a
space between the columns that I can't seem to get rid of)... Mozilla does
not.display what I would expect (the columns are stacked vertically... as if
"float: left" was not applied). I'd appreciate any ideas on how to get this
working.

Thanks,
Peter Foti

[Steve Pugh]

"Peter Foti" <pe****@systolicnetworks.com> wrote:

I want to create a 2 row and 2 column layout (without using tables... even
though the resulting code looks very table-like). Here's the sample HTML
code I have so far:

<div class="row">
<div class="col1">Top Left</div>
<div class="col2">Top Right<br><br><br>Still here</div>
</div>
<div class="row">
<div class="col1">Bottom left</div>
<div class="col2">Bottom right</div>
</div>

And here's the styles applied:

.row { display: block; }
As that's the default for div do you need to specify it? And in fact
do you actually need the row divs at all?
.col1 { border: 1px solid blue; background-color: #eee; float: left; width:
100px; margin: 0; padding: 0;}
.col2 { border: 1px solid red; background-color: #ddd; width: 100px; margin:
0; padding: 0; }

IE displays the results close to what I would expect (though there is a
space between the columns that I can't seem to get rid of)... Mozilla does
not.display what I would expect (the columns are stacked vertically... as if
"float: left" was not applied). I'd appreciate any ideas on how to get this
working.

Guess what? IE is wrong and Netscape is right. The col2 divs still
start at the left hand edge of the parent, but any content in them
starts after the float. See the examples in the spec:
http://www.w3.org/TR/CSS2/visuren.html#floats
As you've set the width of col2 to 100px there is no room alongside
col1 for the text and so it must appear below col1.

One possible solution is:

..col1 { border: 1px solid blue; background-color: #eee; float: left;
width: 100px; margin: 0; padding: 0; clear: both;}
..col2 { border: 1px solid red; background-color: #ddd; width: 100px;
margin: 0 0 0 102px; padding: 0; }

<div class="col1">Top Left</div>
<div class="col2">Top Right<br><br><br>Still here</div>
<div class="col1">Bottom left</div>
<div class="col2">Bottom right</div>
cheers,
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Peter Foti]

"Steve Pugh" <st***@pugh.net> wrote in message
news:8k********************************@4ax.com...

"Peter Foti" <pe****@systolicnetworks.com> wrote:

I want to create a 2 row and 2 column layout (without using tables... eventhough the resulting code looks very table-like). Here's the sample HTML
code I have so far:

<div class="row">
<div class="col1">Top Left</div>
<div class="col2">Top Right<br><br><br>Still here</div>
</div>
<div class="row">
<div class="col1">Bottom left</div>
<div class="col2">Bottom right</div>
</div>

And here's the styles applied:

.row { display: block; }
As that's the default for div do you need to specify it? And in fact
do you actually need the row divs at all?

I wasn't sure if I needed to specify it. And it seems that I don't need to
include the div rows after all! :)

.col1 { border: 1px solid blue; background-color: #eee; float: left; width:100px; margin: 0; padding: 0;}
.col2 { border: 1px solid red; background-color: #ddd; width: 100px; margin:0; padding: 0; }

IE displays the results close to what I would expect (though there is a
space between the columns that I can't seem to get rid of)... Mozilla doesnot.display what I would expect (the columns are stacked vertically... as if"float: left" was not applied). I'd appreciate any ideas on how to get thisworking.

Guess what? IE is wrong and Netscape is right. The col2 divs still
start at the left hand edge of the parent, but any content in them
starts after the float. See the examples in the spec:
http://www.w3.org/TR/CSS2/visuren.html#floats
As you've set the width of col2 to 100px there is no room alongside
col1 for the text and so it must appear below col1.

Ahh!!!
One possible solution is:

.col1 { border: 1px solid blue; background-color: #eee; float: left;
width: 100px; margin: 0; padding: 0; clear: both;}
.col2 { border: 1px solid red; background-color: #ddd; width: 100px;
margin: 0 0 0 102px; padding: 0; }

<div class="col1">Top Left</div>
<div class="col2">Top Right<br><br><br>Still here</div>
<div class="col1">Bottom left</div>
<div class="col2">Bottom right</div>

Exactly what I was shooting for! Of course, IE still displays a space
between the columns, but I assume that's some sort of IE width bug.
Thanks!
Pete