using z-index and position in css to seperate design and core!

Question

I am using the yui-grids css (irrelevant if you don't know what this is) with three columns. and I'm putting all the fancy design stuff on the left column and using z-index and relative psitioning bringing them in the center. and then putting all the important stuff like forms, inputs buttons, links and context in the center. Is this wrong. I've never seen this done so I was wondering maybe there is something I don't know! or am not considering. Should I just use one column?

Answer 1

I'm not totally sure what you're asking, so I'll give it a shot:

---

Columns

If you're going with a column layout, you should give just floating elements a go. Due to how floating works, a clearfix hack will be nessecary (link provided below). Clearfix allows child elements to be floated while maintaining the parent element's height and block nature. Clearfix can only be added to block elements.

For my example, we will be going with a 2 column layout -- one #content column and a #sidebar column -- you could do two, three or more.

For the parent div (that contains the #content and #sidebar elements), you'll need to add a class="clearfix".

For the content div, you'll want to float it to the left. For the sidebar div, you'll want to float it to the right.

Now, the CSS:

#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }

This should produce a 750px box with a content element on the left and a sidebar on the right with 50px in between both elements (750-(500+200) = 50).

---

Floating Module

If this isn't what you wanted, and were looking to produce a module element (lightbox, popup window, etc) instead, this is easy too.

First, create a div called #module. Put in your content into it. Let's say you want to give it a width of 500px and you want the height to be static at 300px. So we'd do this CSS:

#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }

What's going on here?

The #module element is being set to position: absolute. This means that it will be floating around the window, and is not constrained to it's parent element. We position it to be 50% from the left of the window and 50% from the top, so it gets in the middle of the window. Percent values are nessecary as they are adjusted when the window resizes. Without the margin, the element's top left corner will be 50% from the top and 50% from the left, so we need to use margin to move it back half of it's width and half it's height. This will allow us to have a box perfectly centered in the middle. The z-index is added to make sure that the element is on top of any other element, including , and other positioned elements.

I hope this helps.

---

Links

• Clearfix: http://gist.github.com/550114

Answer 2

This kind of layout wouldn't be correct in my opinion. The design of an element must be described in that particular element.