Enteries RSS (1052) 02
2008
10:18 am
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.
.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
del.icio.us (
StumbleUpon
Digg
Wong it
23 Responses, 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!
That IS progress. Your blogging skills are getting better and better. I had a great time reading this post.
I agree with everybody else: awesome story.! Much food for thought… It really made my day. Thank you.
Nice trick. But until css3 is perfected/implemented I would I would be fine w/ using a table because realistically it is more stable.
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
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
?
February 14th
2008
18:14 pm
@ Billgates
Yes, but this is tableless code
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/
February 1st
2008
22:23 pm
@ Brian
Yes that’s right
Did you find answer from your forum question here?
February 1st
2008
11:46 am
Should the code for div#wrapper say “margin-top:-200px;” rather than “top:-200px;” ?
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.
- May 7, 2008: 10 buenos hacks para CSS « SylarPoOoX
- Mar 19, 2008: 10 best CSS hacks « Share4Vn.com Blog
- Mar 7, 2008: CSS-FAQ » Blog Archive » CSS Hacks for You! (First Serving)
- Mar 7, 2008: NilDesign.ru » 10 лучших CSS хаков + кроссбраузерность
- Mar 7, 2008: Thatgrafix Web Design Portland Oregon
- Feb 26, 2008: Los 10 mejores hacks CSS — Freak Group
- Feb 20, 2008: 10 best CSS hacks « DELE DURO!!!
- Feb 20, 2008: links for 2008-02-19 | dies und das | XSBlog2.0beta
- Feb 16, 2008: 10 best CSS hacks
evden eve nakliyat:
May 8th
2008
12:09 pm
you are welcome