User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
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 391,768 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 3,159 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
Views: 2447 | Replies: 2
Reply
•
•
Join Date: May 2006
Posts: 69
Reputation: mikki2 is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 1
mikki2 mikki2 is offline Offline
Junior Poster in Training

Help Placing one div within another

  #1  
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 
/* 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
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: Placing one div within another

  #2  
Aug 18th, 2007
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!
Reply With Quote  
•
•
Join Date: May 2006
Posts: 69
Reputation: mikki2 is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 1
mikki2 mikki2 is offline Offline
Junior Poster in Training

Re: Placing one div within another

  #3  
Aug 20th, 2007
i've being a bit so i didnt reply sooner. Thanks! i'll go try it out.
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Thread Tools Display Modes
Hybrid Mode Hybrid Mode

•
•
•
•
code css development div dreamweaver firefox google checkout google checkout vat html html api javascript news symantec tables w3c web wysiwyg xml
Similar Threads
Other Threads in the HTML and CSS Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 4:30 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC