vertical aligning of a div inside div

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

vertical aligning of a div inside div

Post 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>
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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>
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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 :?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

ree, yours works in Mozilla but not in IE or Avant
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

margin's can probably be used, but the parent would need layout.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post 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>
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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. :)
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post 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.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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???
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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>
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post 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.
Post Reply