Placing one div within another

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 402,032 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,445 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Placing one div within another

•

Join Date: May 2006

Posts: 69

Reputation: mikki2 is an unknown quantity at this point

Rep Power: 3

Solved Threads: 1

mikki2

Offline

Junior Poster in Training

Placing one div within another

Aug 18th, 2007

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/w...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:

Help with Code Tags

(Toggle Plain Text)

/* 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;*/
    }

/* 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

DaniWeb Home > Forums > Web Development > Web Design > HTML and CSS > Placing one div within...

Placing one div within another

Placing one div within another

Placing one div within another