2010-08-22

HTML/CSS not as intuitive

So you have the root container of your application and want to center it on the screen (regardless of screen resolution). How do you do that in HTML? I use Dreamweaver CS5, so I thought the CSS code hinting would make this easy for me to figure out. "position" property? Nope. There is a "vertical-align" property, but not "horizontal-align" property. "float" property maybe? Nope. How about "display"? Nadda, again.

Finally after some google I found this and it worked:

.rootContainer {
width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;
}

So in essence a hack as I see it. The above CSS basically says take your container, makes it 1000 pixels wide, position it as 50% from the left border and then goes back 500 pixels (always half of the container's width) in the left direction. Basically it is doing a mathematical calculation for you. In 2010, shouldn't things be easier for you than this?

The equivalent in Flex you ask? If your container is nested within a Canvas, just set the horizontalCenter like so:

horizontalCenter="0"

Simplicity. I love it. And in the case that the parent was a non-Canvas type container, then you could use:

horizontalAlign="center"

Again, simplicity. You know just but looking at either one of those lines what the positioning of child elements is going to be.

The conclusion here is not to say that I don't want to learn, or that I am being lazy. Neither that a simple math calculation is beyond my abilities. It's to say that it is not intuitive! We use the word intuitive when talking about a user using a UI for the first time, how easy it is to figure out how to perform some task; well same goes for developers. In Flex it is easy to figure out how to position elements within a container, in HTML it is not so easily apparent.

Another one is the CSS "float" property. Allows you to push elements to the right or left. But top and/or bottom? No idea, haven't discovered that one yet :)

P.S.: Don't ever use the HTML <center> tag to center elements...it doesn't just center its immediate children, but children of children as well. Don't ask me what algorithm it uses!

6 comments:

Sydney said...

Wouldn't this work too? It's clean, simple and no absolute positioning...

.rootContainer {
width: 1000px;
margin: 0 auto;
}

nickgs said...

Sydney has got it. That is the best practice right now.

margin: 0 auto;

Dimitrios "Jimmy" Gianninas said...

Thank you both...actually a colleague of mine gave me that exact solution this morning. Still not as intuitive.

New York accountant referral listings said...

Wouldn't this work too? It's clean, simple and no absolute positioning....rootContainer {width: 1000px;margin: 0 auto;}

グリー said...

今年のクリスマスも後少しですね。グリー内でもクリスマスに備えて異性と交流を持つコミュニティが活発で、自分も今年のクリスマスにお陰で間に合いました!!みなさんもイブを一人で過ごさなくても良いように、グリーで異性をGETしよう

Australia Web Development said...

How's it going? Any updates if the code suggested by our fellow bloggers here works?