Keeping columns the same length

[Fluxcore]

I have a layout, 3 columns wide, using CSS with no tables. The center
column is much larger (longer) then the left and right. But I want the
the left and right to be as long as the middle, is there a way to do
this? Is it possible to inherit the middle columns length or something?
Thank you for your help.

Nicholas

 

[Richard]

I have a layout, 3 columns wide, using CSS with no tables. The center
column is much larger (longer) then the left and right. But I want the
the left and right to be as long as the middle, is there a way to do
this? Is it possible to inherit the middle columns length or something?
Thank you for your help.

Nicholas

you could try
div.left, .middle, .right {width:100px; height100px; float:left;}
div.left {background:red;}
div.middle {background:white;}
div.right {background:blue;}

Works just fine for me.

 

[brucie]

I have a layout, 3 columns wide, using CSS with no tables. The center
column is much larger (longer) then the left and right. But I want the
the left and right to be as long as the middle, is there a way to do
this?

not supported by IE
http://moreshit.bruciesusenetshit.info/equal-height-cols-thingy.html

 

[Leif K-Brooks]

you could try
div.left, .middle, .right {width:100px; height100px; float:left;}
div.left {background:red;}
div.middle {background:white;}
div.right {background:blue;}

Works just fine for me.

And will, as long as all three columns contain pixel content (images) of
less than 100x100px. If they contain anything larger, such as text or
larger images, your layout will break.

 

[Whitecrest]

not supported by IE
http://moreshit.bruciesusenetshit.info/equal-height-cols-thingy.html

"This site is designed for and will look much better in a modern browser
such as Opera or Mozilla, but it is accessible to any browser or
Internet device."

It did not work on my browser at all.

 

[Richard]

Fluxcore wrote:

you could try
div.left, .middle, .right {width:100px; height100px; float:left;}
div.left {background:red;}
div.middle {background:white;}
div.right {background:blue;}

Works just fine for me.

Ok so I have a minor typo in there. You know how to fix it.

 

[Richard]

in post <Fluxcore said:

not supported by IE
http://moreshit.bruciesusenetshit.info/equal-height-cols-thingy.html

Oh?

http://1-large-world.com/samples/3cols.html

Works just fine in IE 6.

 

[David Dorward]

"This site is designed for and will look much better in a modern browser
such as Opera or Mozilla, but it is accessible to any browser or
Internet device."

It did not work on my browser at all.

It might be easier to work out why it doesn't work if you (a) State what
your browser is and (b) be more specific then 'did not work'.

 

[Richard]

And will, as long as all three columns contain pixel content (images) of
less than 100x100px. If they contain anything larger, such as text or
larger images, your layout will break.

To get around that, you make your divisions equal to what the largest one
is.
If you don't like that idea, create another division for the extra stuff
such as images.

 

[Richard]

And will, as long as all three columns contain pixel content (images) of
less than 100x100px. If they contain anything larger, such as text or
larger images, your layout will break.

You mean like this?
http://1-large-world.com/samples/3cols-1.html

 

[Whitecrest]

It might be easier to work out why it doesn't work if you (a) State what
your browser is and (b) be more specific then 'did not work'.

Nothing worked. I was viewing it in a specialty browser, made
specifically for color blind people with no hands or navel, and one
right foot.

My point is that there is NO meaningful code that is accessible in EVERY
BROWSER in the world.

 

[John McGaw]

in post <Fluxcore said:

not supported by IE
http://moreshit.bruciesusenetshit.info/equal-height-cols-thingy.html

Oh?

http://1-large-world.com/samples/3cols.html

Works just fine in IE 6.

Enlarge the font size and watch what happens.
--
John McGaw
[Knoxville, TN, USA]

Return address will not work. Please
reply in group or through my website:
http://johnmcgaw.com

 

[Eric B. Bednarz]

I have a layout, 3 columns wide, using CSS with no tables. The center
column is much larger (longer) then the left and right. But I want
the the left and right to be as long as the middle, is there a way to
do this? Is it possible to inherit the middle columns length or
something?

<http://sandbox.bednarz.nl/css/height/cols.html>

 

[brucie]

Nothing worked. I was viewing it in a specialty browser, made
specifically for color blind people with no hands or navel, and one
right foot.

you should complain to the creator of your browser. you probably paid a
lot of money for your specialty browser and it doesn't even support html
that pre public beta versions of mosaic support.

of course it could be made a bit prettier, it is just a demo but i
didn't think it worthwhile to support the 10+ year old mommy of the
modern browser.

My point is that there is NO meaningful code that is accessible in EVERY
BROWSER in the world.

worst case is just plain text, its a reasonable argument that plain text
isn't accessible but it is still there for the visitor to make what
sense of it they can. but i'd be very surprised if a browser didn't at
least support a <p>

 

[brucie]

you should complain to the creator of your browser. you probably paid a
lot of money for your specialty browser and it doesn't even support html
that pre public beta versions of mosaic support.

of course it could be made a bit prettier, it is just a demo but i
didn't think it worthwhile to support the 10+ year old mommy of the
modern browser.

i forgot the screencap:

win mosaic 0.6b
http://moreshit.bruciesusenetshit.info/mosaic.png[7k]

 

[brucie]

http://1-large-world.com/samples/3cols.html
Works just fine in IE 6.

http://moreshit.bruciesusenetshit.info/screencap001.png [5k]
http://moreshit.bruciesusenetshit.info/screencap002.png [7k]

 

[Richard]

in post <Richard said:

http://moreshit.bruciesusenetshit.info/screencap001.png [5k]
http://moreshit.bruciesusenetshit.info/screencap002.png [7k]

No shit, when you take the page size down so low like that.
IE isn't perfect, but you said the coding did not work at all and I proved
you wrong.

 

[Steve Pugh]

"This site is designed for and will look much better in a modern browser
such as Opera or Mozilla, but it is accessible to any browser or
Internet device."

It did not work on my browser at all.

Really? What browser is that? As far as I can tell it even works in
antiques like IE6 and NN4.

The page is just blocks of text separated into three semantics-free
<div>s. No links, no forms, no multimedia. So not much ther to
actually 'work'. How does it not work? Is the text not legible? Are
the divisions not divided?

In CSS-less browsers I see three blocks of text.
In browsers with some CSS support they gain coloured backgrounds.
In browsers with advanced CSS support they are arranged into three
columns.

Or put that into reverse and it seems like a good example of graceful
degradation.

The only thing I would question is the inclusion of the message you
quoted which isn't really needed and which might confuse some users
of older browsers.

Steve

 

[Toby A Inkster]

http://moreshit.bruciesusenetshit.info/mosaic.png

You're kinda cheating there. The version of the page that is actually
online wouldn't work in Mosaic (even up to version 2.1) as it has the
following in its HTTP headers:

Content-Type: text/html; charset=iso-8859-1

And Mosaic prior to version 3 chokes on character sets.

 

[brucie]

The only thing I would question is the inclusion of the message you
quoted which isn't really needed and which might confuse some users
of older browsers.

the only reason i stuck it in was because i knew it would piss people
off. it worked!