How to position from bottom in IE?

**kathari** · July 26th, 2006, 06:29 AM

Hi,
I have a site where I need to position a div (nested inside another div) at the very bottom of its parent div. In Firefox and Safari it works fine with the following;

Code:

<div id="leftmenu">
			<ul>
				<li>&nbsp;</li>
				<li>&nbsp;</li>
				<li>&nbsp;</li>
				<li>&nbsp;</li>
				<li>&nbsp;</li>
			</ul>
			
      <div id="language">
        <ul>
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
        </ul>
      </div>
		</div>

and this css:

Code:

#language {
	width: 180px;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
}

But this doesn't seem to work with IE for Mac. The "language" div simply disappears. Maybe because IE positions it below the bottom?
I am simply not sure how I should calculate bottom positioning. Also I haven't checked this on PCs yet.
Can somebody advice me?

**aldomatic** · July 26th, 2006, 10:02 AM

you have to set the positioning on the parent div to relateive so what ever is inside it will be positioned absolute and you have to specify LEFT or RIGHT not just BOTTOM alone.

-al

**kathari** · July 26th, 2006, 03:50 PM

OK, the parent div is relative but it doesn't change anything when I define left: 0;.
What I wonder is; how does the browser place according to bottom? If I position something, left: 0; it is really simple to understand. The top left corner will be placed at 0.
But if I have bottom: 0;, does the browser place the "lowest" part of the div 0px from the bottom (like it seems in Safari and Firefox). Or does it place the top, left corner 0px from the bottom. Or some other way?

**aldomatic** · July 26th, 2006, 04:59 PM

here is an example of what i think you want but i dunno, maybe it might help you

-aldo

ps:just change the exstention on the file to .html

**kathari** · July 26th, 2006, 05:12 PM

OK, I hadn't defined the parent div as relative as in your code. Only now the child div shows but not at the right place... it shows up much too high up. Will have a look at this again. THanks! that put me on track at least.

**kathari** · July 26th, 2006, 05:18 PM

Hm, I can't really define the height of the parent div (different in each page) and right now the child div shows up way too high... and also often on top of the <li>'s in the parent div.
Do I have to define the height or is it something else I am doing wrong?

**aldomatic** · July 26th, 2006, 05:42 PM

no you dont have to i just did it for the example

just as long as you have enough content to make it expand.

and if you dont have enough content you can do this ive had past experiences like you might be having so i had find a workaround here goes

add and ID to the body tag for example, 2 pages with each different heights:

<body id="homepage">
<body id="contactpage">

//-------
now in css specify the height for each page since they are going to be diffrent heights.

body#homepage div#content{
height:400px;
}
body#contactpage div#content{
height:300px;
}

might help ya
-al

**kathari** · July 26th, 2006, 05:58 PM

Yeah, 5 already have body id's but 5 also have content in the parent div, which the child div doesn't seem to care much about!
Thanks, will look into it more tomorrow

**aldomatic** · July 26th, 2006, 06:00 PM

**MTsoul** · July 26th, 2006, 07:32 PM

Uh.. For your information... IE6 does not support CSS "bottom" values. It completely ignores it. You can have left, top, right values, just not bottom.

You can use height / margin to imitate the effect...