Page 1 of 1
vertical aligning of a div inside div
Posted: Thu Sep 01, 2005 5:57 am
by raghavan20
I basically wanted to know how you will do this normally.
I have a div and a child div within it and I want the child div vertically aligned
example code:
Code: Select all
<div style="width:400px; height:400px">
<div style="width:200px; height:200px">i am the child div; help me vertically aligned within my parent div</div>
</div>
Posted: Thu Sep 01, 2005 6:57 am
by Ree
Here you go.
Code: Select all
<div style="width:400px; height:400px; display: table-cell; vertical-align: middle; border: 1px solid black;">
<div style="width:200px; height:200px; border: 1px solid black;">i am the child div; help me vertically aligned within my parent div</div>
</div>
Posted: Thu Sep 01, 2005 8:18 am
by raghavan20
thanks for your help.
but did you try to run your code.
it does not work...i tried the same earlier.
it aligns to top vertically

Posted: Thu Sep 01, 2005 8:45 am
by Chris Corbyn
Vertical-align from what I remember only works for images.
To do it with nested div elements you need to make the parent div display:table and the child div display:table-cell...
http://www.jakpsatweb.cz/css/css-vertic ... ution.html
Posted: Thu Sep 01, 2005 8:48 am
by Ree
well, the child div aligns vertically in the middle of the parent div. isn't that what you wanted? it definately works this way. and vertical-align works not only for images, you can align divs vertically as well.
Posted: Thu Sep 01, 2005 10:23 am
by raghavan20
ree, yours works in Mozilla but not in IE or Avant
Posted: Thu Sep 01, 2005 11:02 am
by Ree
yeah, IE is crap.

Actually I don't know a way to achieve what you want in IE other than using simple tables + valign.
Posted: Thu Sep 01, 2005 11:08 am
by feyd
margin's can probably be used, but the parent would need layout.
Posted: Thu Sep 01, 2005 11:11 am
by JayBird
This works in IE7...haven't tried in anything else
Code: Select all
<div style="display: table; width: 400px; height: 400px; _position: relative; overflow: hidden; border: 1px solid black;">
<div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
<div style=" _position: relative; _top: -50%; width: 200px; height: 200px; border: 1px solid black;">i am the child div; help me vertically aligned within my parent div</div>
</div>
</div>
Posted: Thu Sep 01, 2005 11:55 am
by raghavan20
pimptastic, finally you got me the solution mate.
it works in all browsers IE, Avant & Mozilla.
I want to what makes this work???
I have seen in a tutorial by d11wtq about IE hacks.
wot are the meanings of _postition??what this "_" for?
why do we have parent position in relative and child position in absolute???
I would like to know more about these than the solution itself.

Posted: Thu Sep 01, 2005 12:01 pm
by nielsene
I think the "_" causes all real browsers to ignore the attribute, so its a way to hide stuff from Firefox, etc, but make MSIE see it.
I commonly use * instead, but... some thing like
Code: Select all
.foo {
margin: 2px;
*margin: -2px;
}
Good browsers use 2px, MSIE would use -2px, etc
Back to the actual code, MSIE doesn't understand the table-cell stuff so it ignore that part of the CSS. Thus each browser sees a version that works for it.
Posted: Thu Sep 01, 2005 12:17 pm
by raghavan20
Pimptastic wrote:This works in IE7...haven't tried in anything else
Code: Select all
<div style="display: table; width: 400px; height: 400px; _position: relative; overflow: hidden; border: 1px solid black;">
<div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
<div style=" _position: relative; _top: -50%; width: 200px; height: 200px; border: 1px solid black;">i am the child div; help me vertically aligned within my parent div</div>
</div>
</div>
nielsene, did you see the _top:50% in the first parent and _top: -50%; in the child div.
I think the overflow property does not have any significance here.
why are we using the abolute and relative positions for each div differently?
so for aligning a div, do I have to have a grandparent div which acts table, parent div which acts as table cell and that vertically aligns the content in it, the child div.
why this problem comes up at the first point???
Posted: Thu Sep 01, 2005 12:23 pm
by raghavan20
this is the basic layout i am trying at many of my sites but does not work.
can any of you figure out why??? the problems are different at different browsers.
Code: Select all
<div style="border: 1px solid black; width:400px; height:100px; margin-left:100px;"></div>
<div style="border: 1px solid purple; width:200px; height:300px; margin-left:100px; float:left; "></div>
<div style="border: 1px solid red; width:500px; height:300px;">
<div style="border: 1px solid blue; width:200px; height:200px; margin-top:50px; margin-left:50px;"></div>
</div>
Posted: Thu Sep 01, 2005 12:38 pm
by nielsene
The fundamental problem is the MSIE broken box model.
If I'm remembering correctly:
According to the spec: the horizontal extent of a div is: width+padding+border+margin
MSIE, however makes it: width+margin (so it steals the borders/padding from the content)
Or something similar. You hit the problem just about anytime you set a width and a padding.