[SOLVED] div height in IE

earl080688 · #1 Sep 24th, 2007, 05:00

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 · #2 Sep 24th, 2007, 06:03

Quote:

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 · #3 Sep 24th, 2007, 06:08

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 · #4 Sep 24th, 2007, 06:19

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

earl080688 · #5 Sep 26th, 2007, 01:11

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 · #6 Sep 26th, 2007, 01:22

Quote:

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 · #7 Sep 26th, 2007, 01:41

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 · #8 Sep 26th, 2007, 01:50

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 · #9 Sep 26th, 2007, 01:53

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

Monie · #10 Sep 26th, 2007, 02:21

Quote:

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 · #11 Sep 26th, 2007, 03:36

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

Monie · #12 Sep 26th, 2007, 04:13

Quote:

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 · #13 Sep 26th, 2007, 07:10

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 · #14 Sep 26th, 2007, 07:37

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 · #15 Sep 26th, 2007, 07:56

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 · #16 Sep 26th, 2007, 08:07

can you also post your html please.

Thanks,

Stew

Monie · #17 Sep 26th, 2007, 08:12

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

earl080688 · #18 Sep 26th, 2007, 08:19

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>

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] div height in IE