[SOLVED] div height in IE

[earl080688]

hi!!! im earl and im new in css and im having trouble with my layout. first i want to have div that always in the center of the page so i use the code margin 0 auto, and it works.. but now i also want to make that div to have always 100% in height, but unfortunately i don't have any idea on how to do that, i already tried height:100% but it doest work. can you please help me with this please....

[Monie]

Originally Posted by earl080688

hi!!! im earl and im new in css and im having trouble with my layout. first i want to have div that always in the center of the page so i use the code margin 0 auto, and it works.. but now i also want to make that div to have always 100% in height, but unfortunately i don't have any idea on how to do that, i already tried height:100% but it doest work. can you please help me with this please....

Well, maybe if you could post your code we can have a better understanding of your real situation there. Anyway, try the link below, it's about CSS layout using percentage (%) value.

Absolute CSS Box (the method I used in my example)

This is one of the solution for your problem and I know there are many way to solve them. Just wait for other members in this forum to give their ideas.

Code: Select all

<style type="text/css">
#content{
    border: 1px solid black;
    position: absolute; /*set the position to absolute and, */
    width: 50%; /*set your div width to any percentage value (eg: 50%)and,*/
    left: 25%; /*you know that your div is 50% of the screen and there is another 50% for the left and right, 25% each so move it 25% to the left.*/
    top: 0; /*this one for the 100% width*/
    bottom: 0; /*this one for the 100% width*/

}
</style>

Hope that helps..

[alexgeek]

host this somewhere so we can see.
though try both of these aswell (one at a time then both):
body {
height: 100%;
}

and

html>body {
height: 100%;
}

[earl080688]

thanks for your help..!! now i have an idea on how to do it.

[earl080688]

hello!! i already tried the first two suggestions but still it didn't work. what i really want is to make a main div that automatically expand in height depends on its content. is it possible in css? sorry if it sounds like non sense to you but i really want to know how. any help will be very much appreciated.. thanks!

[Monie]

Originally Posted by earl080688

hi!!! im earl and im new in css and im having trouble with my layout. first i want to have div that always in the center of the page so i use the code margin 0 auto, and it works.. but now i also want to make that div to have always 100% in height, but unfortunately i don't have any idea on how to do that, i already tried height:100% but it doest work. can you please help me with this please....

Easy, just set the: {height: auto;}
and what do you mean by 100% in height? Is it the height of your browser screen, because that's what 100% height means, (for me), and I have answer that problem in my previous post which I have tested them both in FF and IE.

[earl080688]

this are my css codes..

Code: Select all

body {
    background-image:url(../images/bg2.jpg);
    background-repeat: repeat-x;
    background-position: bottom;
    background-attachment: fixed;    
    height:100%;
}

#wrapper {
    margin: 0 auto;
    width: 800px;
    position: relative;
    height:100%;
}
#topbar {
    width: 800px; 
    height: 170px; 
    position: absolute; 
    top: 0px; 
    z-index: 0;
    left: 0px; 
    
}
#main {
    width: 800px;
    height:100%;
    min-height:400px;
    max-height:800px;
    position: absolute;
    background-color:#FFFFFF;
    top:170px;
    left: 0px;
    bottom:0;
}

the wrapper contains the topbar and the main div, and i want to make the wrapper and the main divs expandable in height depends on their contents. is it possible? and also please correct my codes if you see errors. thanks again!!

[earl080688]

ah.. yes that's what i want to do before, to make a div which has a 100% in height depending on the browser. but now i realize that i still don't have much things to put on my page so if the height is 100% i am just going to have a lot of blank spaces. so now what i want is to have a div that expand in height depends on its content. i really appreciate your help...thanks!

[Monie]

Let me have a look first. I'll come back ASAP :-)

[Monie]

Originally Posted by earl080688

ah.. yes that's what i want to do before, to make a div which has a 100% in height depending on the browser. but now i realize that i still don't have much things to put on my page so if the height is 100% i am just going to have a lot of blank spaces. so now what i want is to have a div that expand in height depends on its content. i really appreciate your help...thanks!

Here is your CSS:

Code: Select all

<style type="text/css">
body {
    background: black;
    margin: 0;
    padding: 0;
    text-align: center;
}
#wrapper {
    margin: 0 auto;
    width: 50%;
    border: 2px solid red;
    height: auto;
}
#topbar {
    border: 2px solid yellow;
    margin: 5px;
    height: 100px; /* fixed height */
}
#main {
    border: 2px solid blue;
    margin: 5px;
    /* dont set any height here, coz it will expand according to your content */
}
p{
    font: small verdana;
    font-size: 14px;
    color: white;
}
</style>

and here is your html:

Code: Select all

<div id="wrapper">
    <div id="topbar">
        <p>This topbar div is fixed in height</p>
        <p>Specify the height in your css!</p>
    </div>
    <div id="main">
        <p>This main div will expand depends on the content height</p>
        <p>The more content you have, the higher your main div gets!</p>
        <p>Dont set any height in this div.</p>
        <p>This main div will expand depends on the content height</p>
        <p>The more content you have, the higher your main div gets!</p>
        <p>Dont set any height in this div.</p>
        <p>This main div will expand depends on the content height</p>
        <p>The more content you have, the higher your main div gets!</p>
        <p>Dont set any height in this div.</p>
        <p>This main div will expand depends on the content height</p>
        <p>The more content you have, the higher your main div gets!</p>
        <p>Dont set any height in this div.</p>
        <p>This main div will expand depends on the content height</p>
        <p>The more content you have, the higher your main div gets!</p>
        <p>Dont set any height in this div.</p>
    </div>        
</div>

I've try that and tested them in FF and IE and it seems perfect!

[earl080688]

wow!! you almost do everything for me.
thanks a lot!! i'm going to try it now.

[Monie]

Originally Posted by earl080688

wow!! you almost do everything for me.
thanks a lot!! i'm going to try it now.

Thats just a simple coding. You have to make yourself ready for any of your future problem regarding CSS. Google for any CSS tutorial and you'll find a lot of them. In fact, you could refer to this forum tutorial by karinne where she provides a bunch of link for you to learn CSS for begineer.

By the way, tell me if it works!

[earl080688]

hey!! i already tried the codes you gave to me. and its working if you add an paragraph,image etc..,but it doesn't if you want to add another div.Because when i try to add a div which is absolute positioned the main div doesn't extend it's height. If i want to add another div inside it all i can use is float. And i can not use absolute positioning. hope i can use it too because it's much easier to use absolute positioning rather than floats. i know it's too much already but i really need your help.

[Monie]

If you put any div inside the main div, don't specify any height to the div. That will solve your problem.

Post your new code (with the problem) here.

[earl080688]

hmm... i already did it, not specifying the height of the divs inside the main.
ok here's the code.

Code: Select all

#main {
    background-color:#FFFFFF;
    position:absolute;
    top:180px;
    left:0px;
    width:800px;
    }
   
#div1 {
    position:absolute;
    width:400px;
    z-index:2;
    left: 0px;
    top: 0px;

}

#div2{
    position:absolute;
    width:400px;
    z-index:2;
    left: 400px;
    top: 0px;

}

#div3 {
    position:absolute;
    width:250px;
    z-index:2;
    left: 400px;
    top: 174px;
    }

that's the whole code...

[welshstew]

can you also post your html please.

Thanks,

Stew

[Monie]

Maybe you could host it somewhere so I can look at the page that you are trying to do.

[earl080688]

ok.. here's the html

Code: Select all

<div id="main">
    <div id="div1"><img src="../images/image03.jpg" alt="" width="400" height="174" /></div>
    <div id="div2"><img src="../images/image04.jpg" alt="" width="400" height="174" /></div>
    <div id="div3"><img src="../images/image05.jpg" alt="" width="250" height="242" /></div>
    
  </div>

[Lchad]

Try adding to the #main div
overflow: hidden;

[Monie]

Any luck with the problem?