PDA

Click to See Complete Forum and Search --> : 100% inside div

Shaolin
07-09-2008, 02:49 PM
Hi Guys,

I have a div which grows and shrinks as content is changing. I want the menu div to be 100% height within the max limit of the div its nested in (i.e. manageCreditContent div), but when I set the property to 100% the menu length goes outside the manageCreditContent div to the bottom of the browser. See code below:

<head>
<style>
#contentPanelTop {
width: 100%;
height : 100%;
background-color : #FFF;
display : inline-table;
margin : 0 0 0 0;
}
#tabContent {
height : 250px;
padding : 20px;
font-family : verdana, arial, san-sarif;
font-weight : lighter;
line-height : 1.8em;
height : 100%;
}
#manageCreditContent {
width: 100%;
height : 100%;
}
#manageCreditContent #menu {
width : 177px;
height : 100%;
float : left;
position : absolute;
background-color : #EEE;
}
</style>
</head>

<div id="contentPanelTop">
<div id="tabContent">
<div id="manageCreditContent">
<div id="menu">
<ul>
<li><a href="#ManageCredit" onClick="loadManageCreditContent('ManageCredit')">Home</a></li>
<li><a href="#AddCredit" onClick="loadManageCreditContent('content_manage_credit')">Add Credit</a></li>
</ul>
</div>
</div>
</div>
</div>
Declan1991
07-09-2008, 04:19 PM
#manageCreditContent #menu is not needed. Since ids have to be unique, you can save a few bytes by simply referring to #menu.

I don't understand why you are positioning the menu div absolutely.
OctoberWind
07-09-2008, 06:10 PM
You have a conflict of interest in div#tabContent.

First you say the height in 250px, then later you say its 100%. Percents work off the parent element, of which you are saying (all the way up the tree) is 100% as well. '86 the 100%, and you should get what you're looking for.

Also, the 'position: absolute' has negative effects on the div#menu. 'Absolute' is telling the browser "forget everything that is around this element, take it out of the document flow, and just put it here (where ever you tell it to go).

On the contrary, if you use 'Relative' you're telling the browser "leave the original space within the document flow, but move it here (where ever you tell it to go) but take it out of the document flow as well.

I hope that makes sense.
Shaolin
07-09-2008, 07:27 PM
Thanks guys. I have managed to fix it now. I am in dire need of some tips though! I am working on an ajax application. I have one index page and that is where everything takes place. I use AJAX to inject html/results from scripts etc. The problem is that I have sooo much CSS I just don't know how to organise it. I have split it into content.css, menus.css and index.css but even this can get alittle confusing. If you are working on large templates, how to do you organise your css?
Declan1991
07-09-2008, 08:23 PM
I put it in sections in one file, and use plenty of comments when I'm working on it. I also indent sections as well as rules. Then I minify it for putting on the web to reduce file size. I also do that with my HTML and JavaScript.