Shoutbox

Ok then, after talking with Nathan a bit i decided to move into a DIV / CSS Based layout instead of tables everywhere, and its been going pretty well and the code looks better to me but i'm not sure...

i have hit a small problem, i am wanting to get the 'container' in the exact middle of the page no matter what resolution, how would i do this? [code is below], btw im only making this for IE6/7 and Firefox based users for now

code:

---

#maincontainer {
    left: 30%;
    top: 200px;
    width: 400px;
    height: auto;
    margin: 0 auto;
    vertical-align: middle;
    padding: 5px;
    position: absolute;
    background-color: #FFFFFF;
    -moz-opacity: 0.65;
    filter: alpha(opacity=65);
}

---

The website can be found here, any other comments would be appreciated, but be aware its only a temporary page

add margin-left: -200px; (half of the div width) and left: 50%; to the div properties. That way, you're making it 50% from the left of the page to the middle of the div.


EDIT: You'll probably wanna use this too to make sure it acts properly ...

code:

---

div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

---

Sorry you misunderstood i think, thats the css code of the box, i want that box centred on the page, not content inside of that centred directly, i also want it completely centered on the page from the top and the side.

Also...Is it possible that the height be specified by how much writing there is??

just get rid of the height atribute.

cant you do margin: auto; for ff and text-align: center; in parent for ie?

i'm not sure if auto margin works for vertical align

also you will need to have set height and width

no it doesnt, i asked him to try that too. And its not margin: auto, its margin: 0 auto; 

Try this: http://exanimo.com/examples/css/vertical-centerin...-floated-shim.html

Source: http://exanimo.com/css/vertical-centering-with-a-floated-shim/

for the vertical alignment:

code:

---

div {
vertical-align:middle;
}

---

Here's an example I just coded up: You should be able to learn from it

http://skoolfun.com/center.htm

Hope it helps

quote:

---

Originally posted by Eddie
Sorry you misunderstood i think, thats the css code of the box, i want that box centred on the page, not content inside of that centred directly

---

That's exactly what it does. To do it centered from the top, just do the same but with margin-top and top:50%.

EDIT: oh, just seen it's not a specified height, nvm

quote:

---

Originally posted by Napbree
Here's an example I just coded up: You should be able to learn from it

http://skoolfun.com/center.htm

Hope it helps

---

Doesn't work in IE.