vertical-align in div

**lord22** · 07-26-2008, 04:35 AM

I have 2 divs:

PHP Code:


<div id="all">



<div id="inside"></div>



</div>

How can I position the "insdie" div in the "all" div, at the following way:

(it means 20px up from the bottom of the "all" div)?

**jscheuer1** · 07-26-2008, 04:59 AM

Like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#all {
font : italic 150% sans-serif;
border : 1px solid #000;
width : 200px;
padding-bottom : 20px;
}
#all p, #inside p {
margin : 0 0 2em 1ex;
}
#inside {
font : italic 100% sans-serif;
border : 1px solid #000;
margin : 0 0.25ex;
}
</style>
</head>
<body>
<div id="all"> 
<p>all</p>
<div id="inside"><p>inside</p></div> 

</div>
</body>
</html>

**lord22** · 07-26-2008, 05:05 AM

HAHA REALLY NICE

Thank you very much !

But actually it's not what I'm looking for, my "all" div can change his height that can be 300px or more, and the inside div should be always stay only 20px up from the bottom no matter what.

**jscheuer1** · 07-26-2008, 05:20 AM

This rule (highlighted):

Code:

#all {
font : italic 150% sans-serif;
border : 1px solid #000;
width : 200px;
padding-bottom : 20px;
}

will always make a 20px gap after the #inside division in the layout, regardless of the height of #all, as long as #inside is the last thing in #all. But let's say that #all has text in it after #inside. Then we can do (after removing the padding-bottom : 20px; rule from #all):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#all {
font : italic 150% sans-serif;
border : 1px solid #000;
width:200px;
}
#all p, #inside p {
margin : 0 0 2em 1ex;
}
#inside {
font : italic 100% sans-serif;
border : 1px solid #000;
margin : 0 0.25ex 20px 0.25ex;
}
</style>
</head>
<body>
<div id="all"> 
<p>all</p>
<div id="inside"><p>inside</p></div> 
more text here that's in all.
</div>
</body>
</html>

**lord22** · 07-26-2008, 05:35 AM

Hi, I understand what you are saying but my problem is that the height of the "all div" height is changing in every page, no matter what it has in.

it can be like:

----------------------------
text

inside
{20px}
----------------------------

or:
----------------------------
text
text
text

inside
{20px}
----------------------------

I want that the "inside" div will always stay at the bottom of the div.

I know that it is easy to do with tables but I prefer using css.

**jscheuer1** · 07-26-2008, 06:13 AM

The first solution I posted will work for that.

**lord22** · 07-26-2008, 07:06 AM

Watch, this is your code:
http://maspic.com/try.html

What am I doing wrong?

**jscheuer1** · 07-26-2008, 07:16 AM

That's a mixture of the styles from my two examples. As I said before, for what you described here:

http://www.dynamicdrive.com/forums/s...91&postcount=5

The first solution will do the job:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#all {
font : italic 150% sans-serif;
border : 1px solid #000;
width : 200px;
padding-bottom : 20px;
}
#all p, #inside p {
margin : 0 0 2em 1ex;
}
#inside {
font : italic 100% sans-serif;
border : 1px solid #000;
margin : 0 0.25ex;
}
</style>
</head>
<body>
<div id="all"> 
<p>all</p>
<div id="inside"><p>inside</p></div> 

</div>
</body>
</html>

**lord22** · 07-26-2008, 07:21 AM

I very appreciate your willingness to help me.
I've also tried it, and again:
http://maspic.com/try2.html

**jscheuer1** · 07-26-2008, 12:51 PM

Sorry, I misunderstood your followup question. I thought the varying height was due to the content of #all forcing #all to be taller, not you setting its style height property. There is a fairly easy way to take care of that, but it isn't cross browser. This is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#all {
font : italic 150% sans-serif;
border : 1px solid #000;
width : 200px;
height : 200px;
position : relative;
}
#all p, #inside p {
margin : 0 0 2em 1ex;
}
#inside {
font : italic 100% sans-serif;
border : 1px solid #000;
margin : 0 3px;
position : absolute;
width : 192px;
bottom : 20px;
}
</style>
</head>
<body>
<div id="all"> 
<p>all</p>
<div id="inside"><p>inside</p></div> 
</div>
</body>
</html>

But it is a little complicated, if you don't follow what is happening, let me know what part you don't understand.