1 Same old culprits

Yet again we are limited by IE, and et again we have to implement another hack…

posted at 07:26 am on July 17, 2007 by Rob McMichael

2 Dude... wow!

That is sweet. I had no idea you could do that, now I’m going “I wonder where I could use that…”

Ta muchly!

posted at 07:34 am on July 17, 2007 by Dan Findley

3 read the spec

Doesn’t anybody ever read the specification? This magical surprising feature of CSS is very clearly defined. I’m only a college student working towards a computer science degree, and I’ve never worked on web design for anybody else, but even I knew about this.

Why is it that even on a site devoted to web design, none of the web developers know very much about the languages and APIs they’re using? I understand that web design is more artistic than programming, and as such web developers shouldn’t be expected to be as technically proficient, but if you’re going to make a living using something you should know something about it.

It always amazes me what poor programmers most web developers make. Are the two skills mutually exclusive or something? I know I’m certainly not very good at making a web page look very pretty.

posted at 08:15 am on July 17, 2007 by James Harrell

4 Nice one

James – it’s not just a matter of reading the specs, it takes time and effort to test each feature against each browser to see whether it is actually supported (many aren’t) and what workarounds, if any, are needed.

posted at 08:17 am on July 17, 2007 by fritz stelluto

5 That's Beautiful

Rob, thanks very much for that. I can have a three column, equal height layout, with a header and footer, and equally can present the contents in any order.

Simply beautiful. Thanks

posted at 08:35 am on July 17, 2007 by Jack Pickard

6 Untitled

Hi Rob,

Ok, box-height and CSS can be very tricky, but why not laying out the template with good old pure-CSS? (then you can opt additionaly for the height-js trick)

for example:

header {height: 80px;}

side {float:left;width:200px;}

right {margin-left:210px;}

posted at 08:42 am on July 17, 2007 by Marc van den Dobbelsteen

7 Scrolls on side bars

While this is indeed a beautiful solution, it creates another issue: The side bar gets a very un-desired scrolls, which remind the frames days. Maybe it’s just a matter of implementation, and can be avoided if the side bars content’s width is known, but it certainly not good to have more than one scrollbar on a page.

Also, the position of the scroll bar (for the main content area) is not ideal. People look for these scrolls on the side of the screen, not somewhere inside it. Can this issue be addressed in the same manner?

posted at 08:58 am on July 17, 2007 by Zohar Stolar

8 Margin hack

As Marc van den Dobbelsteen already said, a simple margin on the right pane would also do the job. simply “width:auto” and margin like the width of the left pane (or even more, if you want some space). Or did i miss something?

posted at 09:53 am on July 17, 2007 by Stefan Insam

9 100% warning and html position

Just a quickie. I moved the menu and sidebar to after the content so that screen readers don’t have to skip the menu.

ISSUE: in all browsers if you set a div to 100% (used for certain effects)it takes the parent width and a horizontal scrollbar appears :( Just not setting it 100% removes the problem but some of my skinning requires it.

posted at 09:56 am on July 17, 2007 by Lee Davies

10 Another method

Interesting method. There is a way to express 100%-20px without dynamic expressions that combines the use of width:100% and borders. I have a crazy example of that. I’m looking forward to the CSS3 days of width:calc(100%-30px);

but it certainly not good to have more than one scrollbar on a page.

I disagree. Many desktop applications have multiple scrollbars. I see no reason why browser-based applications should not.

posted at 09:56 am on July 17, 2007 by Menno van Slooten