G
Greg N.
Hi folks,
Look at the small example at http://coolhaus.de/misc/test5.htm .
It looks OK at first glance, but when I resize the window to make it
narrower, the section below the columns overlays the columns.
The reason is, obviously, that there is a discreet height assigned to
the columnn part (style="height:100px;").
But without that discreet height specification, it does not work at all,
that is, the columns and the stuff below always overlay each other.
This can't be the correct way to do it. What am I missing?
Below is the html at http://coolhaus.de/misc/test5.htm :
<html>
<style type="text/css">
BODY { width:60%; }
.columns { position:relative; width:100%; }
.col { position:absolute; top:0; height:100%;}
.c31 { left:0; width:32%; }
.c32 { left:33%; width:32%; }
.c33 { left:66%; width:33%; }
</style>
<body>
<h3> this is how I do a 3-column layout</h3>
<div class="columns" style="height:100px;">
<div class="col c31">
this stuff goes to the left column, this stuff goes to the left column,
</div>
<div class="col c32">
here something that goes into column 2! here something that goes into
column 2!
</div>
<div class="col c33">
This is column 3. This is column 3. This is column 3. This is column 3.
</div>
</div>
<h3>This section should go below the column part</h3>
This section should go below the column part. But watch what happens
when you resize the window to make it narrower.
</html>
Look at the small example at http://coolhaus.de/misc/test5.htm .
It looks OK at first glance, but when I resize the window to make it
narrower, the section below the columns overlays the columns.
The reason is, obviously, that there is a discreet height assigned to
the columnn part (style="height:100px;").
But without that discreet height specification, it does not work at all,
that is, the columns and the stuff below always overlay each other.
This can't be the correct way to do it. What am I missing?
Below is the html at http://coolhaus.de/misc/test5.htm :
<html>
<style type="text/css">
BODY { width:60%; }
.columns { position:relative; width:100%; }
.col { position:absolute; top:0; height:100%;}
.c31 { left:0; width:32%; }
.c32 { left:33%; width:32%; }
.c33 { left:66%; width:33%; }
</style>
<body>
<h3> this is how I do a 3-column layout</h3>
<div class="columns" style="height:100px;">
<div class="col c31">
this stuff goes to the left column, this stuff goes to the left column,
</div>
<div class="col c32">
here something that goes into column 2! here something that goes into
column 2!
</div>
<div class="col c33">
This is column 3. This is column 3. This is column 3. This is column 3.
</div>
</div>
<h3>This section should go below the column part</h3>
This section should go below the column part. But watch what happens
when you resize the window to make it narrower.
</html>
