How to have the div layer center on any browser?

[bazmanblue]

hello im trying to get my div layer to align so that it centers on the browser so it doesnt matter about the size of somones browser it will always be centered on the page. i have tried
[HTML][/HTML]
but this doesnt seem to work when i view it in my browser and make the browser page smaller. i am doing this in dreamweavers test browser, could this be the problem? any help would be very much apreciated

[BudBrocken]

align=center doesn't work on divs.
try this:

body {
    text-align: center;
}
.style1 {
    margin: auto auto;
}

[bazmanblue]

thanks but i have tried that and this way but it still doesnt work for some reason
[HTML]#Layer1 {
position:absolute;
width:800px;
height:800px;
margin-right:auto;
margin-right:auto;
}[/HTML]
is it the position absolute that i need to delete? might try that now

[bazmanblue]

nope not the position absolute either:rolleyes:

[BudBrocken]

indeed, it won't work with absolute positioning

[BudBrocken]

use

margin: auto auto;

don't use

margin-right: auto;
margin-right: auto;

and don't forget

body {
    text-align: center;
}

[bazmanblue]

aha thanks your a star! do you know how i keep the divs inside this div from moving?
i.e there left and top attributes?

[bazmanblue]

ive got the main layer to staycentral thanks. but how do i keep the layers on top of this in the same position on that layer when the browser size changes?

[bazmanblue]

this is how i have set the layers over another layer [HTML] [/HTML] and this is how one of the layers is currently set out in css [HTML]#Layer3 { position:absolute; width:200px; height:115px; z-index:2; left: 314px; top: 32px; background-color: #FFFFFF; }[/HTML]

[tgreer]

In all of this discussion, "doctype" hasn't been mentioned. It is impossible to tell you what HTML/CSS code to use if we don't know which version of HTML/CSS you're using.

[bazmanblue]

i think this is what you mean. not certain as still learning
[HTML][/HTML]

[tgreer]

No. "Doctype" is short for "Document Type", and specifies to the browser the HTML/XHTML version your page is using. Until you know about doctypes and the various underlying DOMs they represent, you'll be shooting in the dark.

http://alistapart.com/stories/doctype/

[bazmanblue]

hmm is this it?
[HTML][/HTML]

[tgreer]

Yes. Ok, so you're using XHTML. Tell me again (so I don't have to re-read the entire thread), what you're trying to achieve? There is no "center" attribute in XHTML. To do horizontal centering, you have to set the left and right margins to "auto". The CSS attributes are:

margin-left: auto;   margin-right: auto

Vertical centering is another issue entirely, and it depends on whether you're working with elements of known vs. unknown height.

Study this source of this page for an example.

Also, this page gives a complete discussion of CSS centering techniques .

[bazmanblue]

Thanks. well i have the main div layer on margin: auto auto and this comes out fine on the browser. now i need all the layers i have included on top of this layer or inside to move with this layer in the same position when the browser size changes. here is how i have the layers [HTML] [/HTML] i just need to know how to set up the css for the layers inside? thanks in advance baz

[tgreer]

You don't have to do anything special to any "contained" block-level elements (divs). They will automatically adjust to changes to the containing element. You can't assign an "align" property to a DIV element. There is no such thing in XHTML.

[bazmanblue]

when i add a layer in the tags it automatically assigns a css style to the individual layer in dreamweaver.
this is how it shows
[HTML]#Layer6 {
position:absolute;
width:501px;
height:417px;
z-index:4;
left: 356px;
top: 183px;
background-color: #FFFFFF;
}[/HTML]
do i delete this or just adjust it?

[tgreer]

Sorry, I don't use/know Dreamweaver. I code all my HTML, CSS, and JavaScript in a text editor. Note that the term "layer" refers to an older, proprietary Netscape-only tag/element. There is no such thing as a layer in standard HTML. I recommend you get in the habit of referring to elements by their proper names. We're dealing with DIV elements, not layers.

That aside, yes, the approach I'd take is to delete all CSS and styles until you get to the bare minimum. Then, build back up as needed.

[bazmanblue]

in css you can assign divs to layers by numbers and is standard xhtml.

[bazmanblue]

[HTML][/HTML]
if anyone uses dreamweaver i could sure do with some help?
it works fine if i dont have margin: auto auto but im trying to get all the tags to move in sequence with the browser size.
when i have tags inside each other i cannot work it out:?: