top
01
02
2008
10:18 am
filed as: CSS
author: Dejan Cancarevic
comments: Subscribe
23 Responses

One of current CSS left outs is vertical align div. And before CSS 3 comes we have to use some tricks to solve this problem. I looked over for some solutions and it all comes up to defining it as table and using vertical align. The second one appears a lot and it’s a nice solution, but it has two faults, I’ll tell you later about them, here’s the code first.

Idea is to place absolute div 50% left and top and then to move margin left and top half if it’s size.

Vector people

.wrapper {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

Problem?

This works only with defined height and when div height is less then browser height so you can’t have scroll. Now you’ll ask why do anyone want vertical align when there’s a vertical scroll? Well for example you have container height 820px and you have it vertically centered in all larger resolutions, simple.

Solution

In this problem (when browser height is less than div height) at smaller resolutions 1/3 of div is not visible, it’s in negative top margin. So idea is to place some relative div that will prevent div to go into negative margin. Here is the code.

<div id=”shim”/></div>
<div id=”wrapper”>
Content
</div>

html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/
div#shim {
display: none;
}

html, body {
height: auto;
}
/* end hack */

/* ]]> */

Only fault is again defined height and it can’t be solved with CSS, not right now, I hope new version will or some JS fix. Click here for demo

Subscribe full RSS RSS
  • del.icio.us del.icio.us (0)
  • StumbleUpon StumbleUpon
  • Digg Digg
  • Mister Wong Wong it
23 Responses, Leave a Reply
23
Dejan
May 8th
2008
12:09 pm

you are welcome ;)

22
House Clearance London
May 8th
2008
11:14 am

Hi. Many thanks for interesting guides. I’ve been looking to this page from time to time, and I’m really amazed about your skills! Thanks & take care!

21
krizalid_01
April 6th
2008
16:59 pm

That IS progress. Your blogging skills are getting better and better. I had a great time reading this post.

20
Omar
April 3rd
2008
10:48 am

I agree with everybody else: awesome story.! Much food for thought… It really made my day. Thank you.

19
Michael Hazzard
February 16th
2008
8:49 am

Nice trick. But until css3 is perfected/implemented I would I would be fine w/ using a table because realistically it is more stable.

18
Dejan
February 16th
2008
1:18 am

Well margin:0 auto; makes it on center, so remove that auto word and add right:1px;
Try it and let me know if it works

17
Brian Purkiss
February 15th
2008
21:07 pm

Sweet!
I’ve used it, and it’s working!
It’s not on the web yet though.
I’ll let you know when.

But let’s say I wanted to align it right - would all I have to include is:

float:right

?

16
Dejan
February 14th
2008
18:14 pm

@ Billgates
Yes, but this is tableless code

15
Billgates
February 14th
2008
15:41 pm

This is a working vertical DIV alignment (including clipping). No percentages used, and it works on both IE and FF.

http://cssbeauty.com/skillshare/discussion/2607/real-working-div-vertical-align/

14
Dejan
February 1st
2008
22:23 pm

@ Brian
Yes that’s right
Did you find answer from your forum question here?

13
Brian Purkiss
February 1st
2008
22:22 pm

So in that demo, the red box is what is centered?

12
Dejan
February 1st
2008
13:01 pm

@ Berkana
No, it has to be like this

Click here for demo

11
Berkana
February 1st
2008
11:46 am

Should the code for div#wrapper say “margin-top:-200px;” rather than “top:-200px;” ?

10
Patrick
February 1st
2008
10:39 am

This is a problem that has definitely plagued a lot of us designers/developers. I know that I certainly have tried to find a solution for this many times.

Fortunately, many situations have allowed for me to set a height to the element I wish to apply the middle vertical align effect, and in a small area of the website, so it did not rise an issue with the scrolling of the page.

I too hope that CSS3 will solve this, though I do believe that there is a JS fix for it, but I don’t know what it would be.

9 Trackback(s)
  1. May 7, 2008: 10 buenos hacks para CSS « SylarPoOoX
  2. Mar 19, 2008: 10 best CSS hacks « Share4Vn.com Blog
  3. Mar 7, 2008: CSS-FAQ » Blog Archive » CSS Hacks for You! (First Serving)
  4. Mar 7, 2008: NilDesign.ru » 10 лучших CSS хаков + кроссбраузерность
  5. Mar 7, 2008: Thatgrafix Web Design Portland Oregon
  6. Feb 26, 2008: Los 10 mejores hacks CSS — Freak Group
  7. Feb 20, 2008: 10 best CSS hacks « DELE DURO!!!
  8. Feb 20, 2008: links for 2008-02-19 | dies und das | XSBlog2.0beta
  9. Feb 16, 2008: 10 best CSS hacks
What do you think?

Name (required)

Email (will not be published) (required)

Website

About

StylizedWeb is blog about web trends and tutorials and KnowHow community forum designed and maintained by Dejan Cancarevic.

Six Shooter Media
logo and web site design

Search