CSS Wrapper Tutorial
Loading ...
Learn all about wrappers in css.
Sometimes centering text and images using css is a nightmare. You test your css in your browser, works fine in internet explorer but your images or text are not centered in other browsers, its just ONE BIG PAIN THE BUTT. So i find its helpful to setup a “wrapper div”
Firstly apply an Internet Explorer HACK
body { text-align:center; }
Now add this piece of code into your stylesheet.
.wrapper {
position:relative;
margin:0 auto;
text-align:left;
width:whatever;
}
An element with position:relative applied to it forces every element inside it (the so called child element) to use the parent as reference, not the viewport (the part of the browser in which a web page is displayed). You could say it resets the reference point of it’s children elements.
Now when using images tables or text simply apply the “.wrapper” class to them. Your element that uses the .wrapper class shall be centered.
4 responses so far!
Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!
-
1
Craig ~ Mar 1, 2008 at 10:11 pm
Awesome! I’ve always wanted to learn this, but could never get the hang of it. Thanks!
-
2
Phil ~ Mar 31, 2008 at 4:09 am
its also worth adding:
overflow: hidden;
to the wrapper to hide any content that passes outside it’s ‘walls’
-
3
user ~ Jun 3, 2008 at 7:59 am
width:whatever;!!???
-
4
Calligan ~ Jun 8, 2008 at 10:02 pm
the width u want
user…detail about
text-align: center; in the body is a hack for ie,cause the old ie dont give a damn about your margin: auto;
like phil said, u can use overflow: hidden;
overflow: scroll; if u need a scroll like an iframe
or overflow: auto; to let the browser decide.
