CSS box containment not moving with view change in mozilla

[snmiller]

First let me apologize as I know this question has been answered here somewhere, but I can't find here, internet or books, Actually I may have read it, but I really don't understand parent, child, inherit, etc., which I THINK this is. I have just about done away with tables on my site, but I still have the following problem: I created a full page containment box and inside of it I have placed other containment boxes which contain text. It seems on most of the pages, if the css text boxes are side by side, I don't seem to have a problem when I test in Mozilla and increase the view from 100% to 120% (well that's not completely true as I had to adjust the title of the site, which is css positioned over a image in the top left corner, in order for it to not expand into the main column when mozilla is expanded to 120%, and gave up on increase to 150%}, however let me place another css positioned box, or images in a css positioned box, under another one and the text in the top one will move into bottom box if Mozilla view is increased. Now what's somewhat interesting, my default page contains 3 css positioned text containment columns and they used to run all over the page when mozilla view was increased, I seemed to have stopped this when I placed the entire page within the containment box. Now, is there a way for text, or image, in a css containment box, placed under another css containment box to also move down in order to not have the top cover the text, or image, which is underneath it?......whew

SM

[SuzyUK]

Hi snmiller

firstly apologies for this getting missed for so long..

It's a bit confusing trying to see what you're getting at, but when you say positioned boxes are you talking about absolute or relative positioning?
and if absolute positoning is it using pixels?

I don't think this is inheritance from your description, but if you'd like to provide a simplified example it might help see what's going on ;)

Suzy

[snmiller]

Hello Suzy:

Thanks for looking into this for me. Below is my css code:

/* overall containment on default page*/
div.overall {
position: absolute;
top: 0px;
left: 5px;
width: 760px;
height: 1100px;
min-width: 760px;
max-width: 760px;
z-index: 0;
background-image: url'images/straightbluestarsfade21.jpg');}

/* navigation bar on default page*/
div.toolbardefault {
visibility: visible;
position: absolute;
top: 275px;
left: 5px;
width: 120px;
height: 633px;
vertical-align: 1px;
line-height: 14px;
text-align: left;
padding-top: 3px;
padding-left: 2px;
font-size: 8pt;
font-weight: 700;
font-family: Verdana, Helvetica, Arial, sans-serif;
min-width: 120px;
max-width: 120px;
min-height: 633px;
max-height: 633px;
background-image: url('images/txflag6long1frame120x633.jpg');
z-index: 2}

/* right side column on default page*/
div.rightbar {
visibility: visible;
position: absolute;
top: 275px;
left: 625px;
width: 130px;
height: 633px;
line-height: 14px;
text-align: center;
padding-top: 3px;
padding-left: 2px;
font-size: 8pt;
font-weight: 700;
font-family: Verdana, Helvetica, Arial, sans-serif;
min-width: 130px;
max-width: 120px;
min-height: 633px
max-height: 633px;
padding-left: 0px;
background-image: url('images/wavyamericanflagGREATlong.jpg');
color: #0000ff;}

/* center column on default page */
div.defaultcolumn200 {
visibility: visible;
position: absolute;
top:250px;
left:133px;
width: 480px;
height: 560px;
min-width: 480px;
max-width: 480px;
min-height: 560px;
text-align: justify;
color: #000000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
font-weight: 400;
padding-left: 6px;
padding-right: 5px;
z-index: 5}

My HTML is:

<div class="overall" id="overallcontainmentonallpages">
<div class="toolbardefault" id="navigationbarondefaultpages">bla bla bla</div>

<div class="defaultcolumn200" id="centercolumndefaultpage">bla bla bla</div>

<div class="rightbar" id="rightsidecolumnondefaultpage">bla bla image bla</div>

If I test, or even look at it in Mozilla and use their view text 120% or 150%, the text in these three columns enlarges and flows downward, which is fine so far, but if I wanted to add another text box underneath these three columns, the text from the upper three columns will enlarge into the box underneath and cover up any text put into this box. Therein lies this amateur's problem. In case you want to see the site: www.concealedhandgun.com, but I am using an external css page. By the way, don't laugh at my z index numbers...another deal I have no idea what I am doing, but it seems to work.

Sammy