View Full Version : DIV Layers - the "Howto"

i am the nut
08-27-2006, 06:16 PM
Alright, I will let you know before you read the rest of this post that I have always used tables because I was raised in knowledge of using them.

I've always wanted to know how to use DIV layers to create layouts. I've tried google repeatatively and have not found a solution.

Could somebody please explain to me how you do this? How it works? What in CSS makes it work?

08-27-2006, 06:29 PM
Alright, I will let you know before you read the rest of this post that I have always used tables because I was raised in knowledge of using them.
We have all started at this point. :)
There is a lot to explain about CSS. But I'm not gonna do this and give you some links as starting points instead:

http://csszengarden.com/ (to learn from the pros)

Basically with CSS you are styling the HTML elements you have in your documents. E.g. a div element can be considered as a box (logical division) to put more elements in it. With CSS you can put borders around it and change font settings and background color/image. You can even move it through margins and/or positioning (the latter one of which is barely needed to position elements by the way - to dispel a common misunderstanding).
And you can style almost any HTML element (to a certain amount) with CSS. But note that you need good, clean, valid HTML for CSS to work properly and do what you want. And always check with a standards compliant browser at first (i.e. Opera, Firefox, Safari) and then fix the issues you're gonna have with IE.

Hope the above named sources help you make a step in the right direction.

i am the nut
08-27-2006, 08:02 PM
No, no, no. I understand CSS. I know how to code CSS. But how do you use DIV layers?

08-27-2006, 08:21 PM
If you know how to code CSS, you should know that you can position your divs on the page using either relative or absolute positioning, floats (and margins), that the background, color, font of each div can be specified, etc. If not, I would also suggest you consult one of the sites suggested by VIPStephan.

08-27-2006, 08:30 PM
Ah, OK, misunderstanding...
You would use absolute positioning (position: absolute; - in conjunction with top, right, bottom, and/or left properties and respective values) to make the divs totally independent from the rest of the code and z-index to stack divs above one another if necessary.

Here are some links that might help:


By the way: My search keywords were "CSS layer", among others, which gave me many helpful results with common search engines.

08-27-2006, 08:31 PM
Also the divs can be "stacked" on top of each other using z-index. 0 being the bottom layer.

08-27-2006, 08:32 PM
Sorry, VIPStephan - you beat me to it!

i am the nut
08-28-2006, 01:27 AM
Okay, well, that doesn't exactly help me...
Me knowing CSS does not "officially" make it where I know how to use DIV layers. CSS is used for more things than just DIV layers.

I want to know how to place the stuff places and everything there is to know.

The links helped though, thanks.