Absolute/relative positioning of div's

[Sentient Fluid]

I'm curious if it's possible to center a (container) div in the middle
(vertically & horizontally) of a page and have any div's inside keep
their position relative to (container) div.

As I learn better if I do it myself, can anyone provide a link (or
links) to helpful, easy to understand (layman's terms would be good)
info online? I'm having trouble finding it myself.

Thanks

~Senti

 

[Spartanicus]

I'm curious if it's possible to center a (container) div in the middle
(vertically & horizontally) of a page and have any div's inside keep
their position relative to (container) div.

http://www.spartanicus.utvinternet.ie/test/senti.htm

 

[Sentient Fluid]

http://www.spartanicus.utvinternet.ie/test/senti.htm

Thanks. I took a quick look at it. Assuming I don't want the container
div to resize, I could just do the following:

div#container{position:absolute;top:25%;left:25%;width:450px;height:450px;border:2px
solid red}

And for the div's in the container, if I wanted them to stay in the
upper and lower right corner's of the container I could just add left,
top, width, height px values and all would be well?

I'd check it out, but I'm replying right before heading out and I'm not
sure when I'll be able to get to it, next.

One more question... is it all cross-browser compatible?

Thanks again!

~Senti

 

[Spartanicus]

Thanks. I took a quick look at it. Assuming I don't want the container
div to resize, I could just do the following:

div#container{position:absolute;top:25%;left:25%;width:450px;height:450px;border:2px
solid red}

That won't work.

http://www.spartanicus.utvinternet.ie/test/senti2.htm
Note that this requires a standard compliant browser, there's no way to
achieve this in IE.

And for the div's in the container, if I wanted them to stay in the
upper and lower right corner's of the container I could just add left,
top, width, height px values and all would be well?

Nope, I don't know what you are striving for, I'm guessing that you want
shrink to fit behaviour from the divs in the box:
http://www.spartanicus.utvinternet.ie/test/senti3.htm
Note that again this requires a standard compliant browser, there's no
way to achieve this in IE.

 

[Sentient Fluid]

That won't work.

http://www.spartanicus.utvinternet.ie/test/senti2.htm
Note that this requires a standard compliant browser, there's no way to
achieve this in IE.




Nope, I don't know what you are striving for, I'm guessing that you want
shrink to fit behaviour from the divs in the box:
http://www.spartanicus.utvinternet.ie/test/senti3.htm
Note that again this requires a standard compliant browser, there's no
way to achieve this in IE.

Actually I don't want shrink to fit at all. I want a set width and
height for the divs in the box. I'd like them on the right side of the
box, and taking up about 1/3 of the width and, combined, the total
height of the box.

Something along the lines of this (all boxes static in size):
________________________
| ________ |
| | ||
| | ||
| | ||
| |_______||
| ________ |
| | ||
| | ||
| | ||
| |_______||
|_______________________|

The whole needs to be centered horizontally on the screen. Thinking on
it, vertical centering probably isn't necessary.

Looking at sample 2, all I'd need to do then is remove the div#wrapper?

And thanks again for all the help.

~Senti

 

[Spartanicus]

Something along the lines of this (all boxes static in size):
________________________
| ________ |
| | ||
| | ||
| | ||
| |_______||
| ________ |
| | ||
| | ||
| | ||
| |_______||
|_______________________|

The whole needs to be centered horizontally on the screen. Thinking on
it, vertical centering probably isn't necessary.

http://www.spartanicus.utvinternet.ie/test/senti4.htm

Note that I've not included the hacks to get around the flaws of IE5.5
and lower.

 

[Sentient Fluid]

http://www.spartanicus.utvinternet.ie/test/senti4.htm

Note that I've not included the hacks to get around the flaws of IE5.5
and lower.

Thanks, again. I've got the code but I won't be able to check it out
until after the long weekend.

Have a good one!

~Senti