Log in

View Full Version : vertical-align in div


lord22
07-26-2008, 04:35 AM
I have 2 divs:

<div id="all">

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

</div>

How can I position the "insdie" div in the "all" div, at the following way:
http://img66.imageshack.us/img66/7206/90775878lq0.png
(it means 20px up from the bottom of the "all" div)?
jscheuer1
07-26-2008, 04:59 AM
Like:


<!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 :D

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):


#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):


<!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/showpost.php?p=153391&postcount=5

The first solution will do the job:


<!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:


<!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.
lord22
07-26-2008, 01:15 PM
Thanks ;)