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.