Placing one div within another

[mikki2]

Ok first off i think this problem is similar to the one in the thread "Problem with div structure" but since i'm not sure if they are the same i will go ahead and post this one.

here's what i've being trying to get it to look like:
http://i175.photobucket.com/albums/w127/Tadtoad/needhelp1a.jpg
but depending on the browser it look different.
here's the link to my testpage. http://mikki2.awardspace.com/
the HP_Displayproduct (outer div) height just doesnt get adjusted with the inner one.
when you try it on firefox, IE and opera, the outer div changes to different heights for all 3 browsers. no matter what i do i cant get the page to look like in the image.

below is the content of my css file:

/* CSS Document */

*{
    padding:0;
    margin:0;
    }
/********/
/* Body */
/********/


/* Body */

body{
    background-image:url(Images/BodyBackground1.jpg);
    background-repeat:repeat-x;
    background-attachment:fixed;

    }

/********* Div  Section *********/

#bodyOutline{
    position:absolute;
    top:-1px;
    /*bottom:-1px;*/
    left:100px;
    right:100px;
    width:800px;
    height:2000px;
    border:1px;
    border-style:solid;
    border-color:black;
    background-color:white;
    }
    
    
/********/
/* Head */
/********/

/* Logo, Top Advert and Top Menu */

/********* Div  Section *********/

#logoNadvert{
        position:absolute;
        width:800px;
        height:150px;
        border-bottom:1px;
        border-bottom-style:solid;
        border-bottom-color:black;
        }
#mainLogo{
        position:absolute;
        top:-1px;
        width:360px;
        height:151px;
        }
#topAdvert{
        position:absolute;
        top:-1px;
        height:151px;
        left:360px;
        width:440px;
        }
#top_menuTable{
        position:absolute;
        top:150px;
        width:800px;
        height:25px;
        border-bottom:1px;
        border-bottom-style:solid;
        border-bottom-color:black;
        }
/**********/
/* Middle */
/**********/

/* Left Hand Side Menu Table, Search Box and Advert */

/********* Div  Section *********/

/* LHS */

#LHSdiv{
        position:absolute;
        top:175px;
        height:1700px;
        bottom:1px;
        width:200px;
        border-right:1px;
        border-right-style:solid;
        border-right-color:black;
        }

#searchBox{
        position:absolute;
        top: 10px;
        height:30px;
        width:200px;
        border-bottom:1px;
        border-bottom-style:solid;
        border-bottom-color:black;
        border-top:1px;
        border-top-style:solid;
        border-top-color:black;
        }

#tableLHS{
        position:absolute;
        top:50px;
        height:200px;
        width:200px;
        border-bottom:1px;
        border-bottom-style:solid;
        border-bottom-color:black;
        border-top:1px;
        border-top-style:solid;
        border-top-color:black;
        }


#advertLHS{
        position:absolute;
        top:260px;
        left:10px;
        right:10px;
        width:180px;
        height:700px;
        border:1px;
        border-style:solid;
        border-color:black;
        }
        
/* Main Story Body */

#mainStory{
        position:absolute;
        width:595px;
        left:205px;
        top:175px;
        height:1815px;
        border-left:1px;
        border-left-style:solid;
        border-left-color:black;
        }

#HP_Displayproduct{
        position:absolute;
        top: 5px;
        width:595px;
        height:315px;
        border-bottom:1px;
        bottom:5px;
        border-top:1px;
        border-top-style:solid;
        border-top-color:black;
        border-bottom-style:solid;
        border-bottom-color:black;
        left: 0px;
        }
#HP_Displayproduct1{
        position:absolute;
        top:10px;
        left:5px;
        right:5px;
        width:585px;
        height:auto;        
        border:1px;
        border-style:solid;
        border-color:black;
        }
#HP_Randomproducts{
        position:absolute;
        top:400px;
        width:595px;
        height:280px;
        border-top:1px;
        border-top-color:black;
        border-top-style:solid;
        border-bottom:1px;
        border-bottom-color:black;
        border-bottom-style:solid;
        }
#randomP1{
        position:absolute;
        top:6px;
        left:5px;
        width:585px;
        height:130px;
        border:1px;
        border-style:solid;
        border-color:black;
        }
#randomP2{
        position:absolute;
        top:145px;
        left:5px;
        width:585px;
        height:130px;
        border:1px;
        border-style:solid;
        border-color:black;
        }
        
        
/* Headers and Paragraphs */ /* Notes - Do not put "position: absolute;" in "p" tag */

h1{
    font-style:normal;
    text-align:center;
    font-family:"Courier New", "MS Sans Serif", "MS UI Gothic", Tahoma;
    }

p.storyPARA{
        text-indent:0.5cm;
        font:"MS Sans Serif";
        padding:5px;
        }

p.randomPARA{
        text-indent:0.25cm;
        font:"Comic Sans MS";
        font-size:11px;
        
        /*margin:0.5cm 1cm 1cm 5cm;
        padding-left:10px;
        padding-right:5px;
        padding-top:5px;
        padding-bottom:5px;*/
        }
/* Images */ /* Notes - Do not put "position: absolute;" in "img" tag */

img.storyIMG{
    float:left;
    top:5px;
    left:5px;
    border:1px;
    border-style:solid;
    border-color:black;
    margin:5px;
    }
        
img.randomIMG{
    float:left;
    top:5px;
    left:5px;
    border:1px;
    border-style:solid;
    border-color:black;
    /*margin:0.05cm;*/
    }

any help will me appreciated, Thanks

[autocrat]

Well, for a start, if you want a "fluid" page for things like height.... you can't use position:absolute!
You are tellign the browsers to stick something "THERE", so no matter what happens, it will not move.

Additionally, you may find it easier if you stop using height: as well.

In IE, it will treat height: as min-height:.
Where as proper Browsers will treat height: as an explicit isntruction, and will not stretch!
Instead content will break out of it.

So, try it more "organicly"... simply place the divs in the order you want for the column, and let the content sort itself out regarding height.

Trust me...

<div id="rightcolumn">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>

Will give you the right-hand column, with 4 blocks for content... as each one fills in, it will automatically stretch to contain the content.
Better yet, it will also push those below it further down!

Overstyling is a common occurence, and it takes a bit to realise some of the "default logic" that is inherant in CSS.

So keep it simply, make a new page, and simply put coloured boxes in the order you want.

I t should do what you want automatically!

[mikki2]

i've being a bit so i didnt reply sooner. Thanks! i'll go try it out.