Feanor

Blogging since the First Age

Box model, three columns layout, all columns the same height

,

Another round of HTML and CSS.
One of the mayor annoyances when developing pages with the box model is the fact that each "box" flows in the page on its own, contrary the old table cells that were dimensioned by the table itself. For example you make a page with three columns, you can set the width but then you can't get the columns the same height.

I've found this interesting tutorial: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Since I was reading it, I've made my own version that is slightly different. I've added a wrapper to set the page width and center it and I've used a nested div to pass the padding to the content in a more convenient way.
My example here: http://files.myopera.com/LorenzoCelsi/files/demo/test-colonne-uguali.html

It looks like the global warming has been postponedShopping day

Comments

Shaunak DeShaunak Tuesday, February 3, 2009 1:58:12 AM

This is swell useful! up

Aux Tuesday, February 3, 2009 8:43:08 AM

After five years in webdev I understood one simple thing: HTML + CSS + browsers currently are no good at layouting and styling. Previously I worked on desktop software and layouting in most GUI toolkits/APIs is much much better. Also I use Adobe Flex from time to time and boy I wish its layouting primitives were in HTML...

Lorenzo CelsiLorenzoCelsi Tuesday, February 3, 2009 9:06:08 AM

It is not that bad. The point is HTML pages are meant to present basic content (mainly text, some images) in a basic way, making sophisticated "design" means to stretch the possibilities to the limit and beyond.
One of the common mistakes is to draw Web sites as graphic objects (you know, like Photoshop or Illustrator) and then try to translate the drawing in a web page, that is like to draw a car on paper and then trying to build it for real.

I am old school maybe but I believe the Web site is like the desktop environment, it should stay out of your way while you mind your business. If it can be pleasant that is good but the eyecandy can't be detrimental for the "usage".

Abobe Flash/Flex is one of the worst things happened to the Web, together with Internet Explorer. For two reasons, one it made people believe Web pages could have been (or even should have been) like cartoons or movies, two it gave a lot of people the idea they could stop worrying about all the HTML annoying stuff substituting HTML with Flash (read it as "the whole Web inside the Flash plugin"). At some point all Web sites were a page that worked only on IE and inside the page there was a rectangle with "loading...." and then a slideshow made in Flash, all this only to show a logo and a mail address.

Aux Tuesday, February 3, 2009 9:55:09 AM

The point is HTML pages are meant to present basic content (mainly text, some images) in a basic way, making sophisticated "design" means to stretch the possibilities to the limit and beyond.

But the world has changed and HTML is not enough anymore. And this is why a lot of stupid guys flooded the web with stupid Flash sites. I don't like only-flash pages too, yet HTML is very outdated.

And HTML is not so basic nowadays, CSS idea was good years ago, but together theese technologies are quite ugly and hard to deal with nowadays. For some time I was subscribed to WHATWG to HTML5 discussion and I think they are moving wrong way and will make HTML even more complicated and less compatible with different browsers. I think HTML should be shrinked to 10-20 tags and that's it. All the visual presentation should be moved to some new CSS so HTML can contain only data and information, no hints on visualisation, no functional stuff like SCRIPT and EVENT-SOURCE tags (move it totally to JS!). Something like that - simple yet effective.

But currently HTML + CSS is a piece of crap. Everyone talks about semantics and all the cool stuff and then create tons of HTML+CSS hacks rendering all the good words to nil yet not using simple tables - it is a tag soup in both ways, so why should anyone care?..

Lorenzo CelsiLorenzoCelsi Tuesday, February 3, 2009 10:00:44 AM

I don't see WHY the HTML is outdated.
The point here is not the technology but the content you have to present. It is like the blogs. Most blogs suck not because the blogging platform is technically outdated but simply because people don't have anything to tell. The whole web 2.0 and "social network" thing is just another marketing claim because I don't see anything different but more stupid people putting more nonsense on the Web. You go looking at MySpace and then tell me.
What do you have to say with a Web site that you can't express with HTML, not only HTML5 but even HTML3?
On a side note, the most "advanced" Web apps I've seen so far are stuff like Gmail and Youtube, both just require some JS to operate and the layout is reduced to the bare minimum.
The browsers today are changing in runtime clients to execute heavy async JS code, I don't see what is the need of sophisticated graphic/rendering abilities. Sounds like an answer without a question.

Omega JuniorOmegaJunior Saturday, March 7, 2009 3:19:38 PM

I have one example that needs sophisticated rendering abilities... and I wrote it myself. It is done in Javascript and HTML5, using the Canvas object. Every major browser used currently can and does execute this quite well without needing any additions. Except for Microsoft's product, that is. But we can hardly call that a "web" browser anyway.

Opera itself once published a 3D-version of the game Worm, using the Canvas object, some javascript and some OpenGL. If that isn't advanced and sophisticated, I don't know what is. If some vendors decide that their customers should be left out of the loop, I say capitalism should run its course.

Lorenzo CelsiLorenzoCelsi Saturday, March 7, 2009 3:43:39 PM

Uhm, when I started working on the Web back in the early '90s there was VRLM and everybody was speaking of "virtual reality" and 3D environments. I also met some people who were working on those helmets and gloves you put on to enter and move around those "virtual reality" stuff.
I made some experiments creating some basic VRLM embedded animations in some sites but I never got the question that stuff was answering.
Where has everything gone now?

Some time ago there was all that hype around Second Life, there were corporations spending millions on it, politicians and new "professionals" selling stuff over there.
Almost gone the same.

Meanwhile the 99% of the Web I am seeing now is VERY basic and/or crappy (the rotating 3D "@") and you are lucky if your bank Internet services work without any major flaw. I would not notice if they put a "best viewed with Netscape" sign (yes, it is impossible because 99% programmers don't know anything but IE).

Yes, there are interesting Web applications like Google services or Mozilla online editor, but I wonder how much of this stuff is here to stay. For sure I do not believe the Worm game is the end of the world as we know it. Javascript + HTML isn't exactly new, I would say.

Anyway, my opinion is the real problem of the Web is there are too many people desperately trying to develop a working business model on top of it. But while this creates "trends" in cycles, the very most of the Web is perceive as worthless, that means no money invested, poor quality, no updates, etc.

Write a comment

New comments have been disabled for this post.

June 2012
M T W T F S S
May 2012July 2012
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30