Stuart,
Thanks for the example, but while it displays according to my
example, it's not what I'm looking for. (I guess my example assumed
too much intuition as to what I was trying to obtain).
Here's where your example fails (and perhaps better illustrates the
problem I'm trying to resolve).
If I make each column a different color, they show up as three
different heights.
Try to imagine col 1 is red and has a left menu, col 2 is white and
is the main content area and col 3 is blue and a right menu (or
something) and the body is green.
I need to be able to put different amounts of content from page to
page in the main text column and have all three be the same height as
the center one from page to page without going to 100% height. (Fixed
width, centered box that grows in height according to its content).
A table will do this.
Terrance Wood suggested this:
Here's an easy solution: don't create designs that look like
they're from
1998 (e.g the 2-col cnet yellow stripe and it's ilk)... there are
so many
more creative and useful possiblities once you get past that design
pattern.
For the record: I am past 1998 in my designs, but as I mentioned
earlier, I don't do designs from 1998 because I want to, I have some
clients who want that look.
Should I tell them to go somewhere else?
Plus I don't want to get into the quirks of clients in this thread,
I'd like to concentrate on finding a solution to a real problem that
is as reliable (browser-wise) and as easy to implement as it is with
a table,
In other words, Terrance, the goal is a design as described above and
the solution can't be change the design, but has to be: attain the
design without a table. If it can't be done, I'd like to see a humble
admission from the non-table people that maybe there is an instance
in the real world where a table is not only OK, but probably THE
solution so I can fell less "unpure":-} about using a table to solve
my problem.
Bob
Bob Schwartz wrote:
I had hoped for some real "solutions" when I posted my original
two cents, but none came. I can only conclude there are none, yet.
I did think more than Rimantas would pop-up with a quick answer for
your question, Bob:
Which browser can correctly render the following:
3 columns, no height defined and a background color different
from that of the body
in column 1 goes a 1000px high image
in column 2 goes a 750px high image
in column 3 goes a 500px high image
the end result should be that all three columns are the same height
in other words:
below the image in column 1, no background color shows
below the image in column 2, 250px of background color shows
below the image in column 3, 500px of background color shows
My response (just for the record!) has a problem displaying the
background colour on Netscape 4.78 and Netscape 6.2 (as far as I
can tell via Browsercam), but otherwise rendering is pretty similar:
HTML:
<div id="container">
<div class="column">
<img src="notableimg.jpg" height="1000" width="100" alt="" />
</div>
<div class="column">
<img src="notableimg.jpg" height="750" width="100" alt="" />
</div>
<div class="column">
<img src="notableimg.jpg" height="500" width="100" alt="" />
</div>
</div>
CSS:
* { margin:0; padding:0; }
body { background-color:#ff0; }
#container { width:90%; background-color:#fff; float:left; margin-
left:5%; _margin-left:2.5%; }
.column { float:left; width:33%; text-align:center; }
.column img { display:block; margin:0 auto; }
Have a look at <http://www.stuarthomfray.co.uk/3col/>
Unfortunately, due to the behaviour of our good buddy PC IE, an
extra hack is called for (the '_margin-left: 2.5%;')
I thought someone else might as well answer your request! ;)
cheers,
Stuart
--
http://www.stuarthomfray.co.uk/
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
