Site Nav Links
Off Site Links
« Links open in new window/tab »
Cool Links
« Links open in new window/tab »
- My FreeLancer Profile
- My Google Ad
- My Golden Oldies
- My WebShots Albums
- Helter Skelter
- Inquiring Minds
- My ImageShack
- My Facebook
- Aim Greenland
- PhotoBucket
- HS Treasures
- Ceece's Articles
- Games
- My Slingo
- Videos
- Music
- RSS Feeds
- StumbleUpon - Lots of Fun!
- World Sunlight Map
Monitor Page for Changes
Centering Block Level Elements
PayneLess Designs
This <p> is absolutely positioned 51.8% from the left side of body. It has a negative left margin of about half its width (32em). The width referred to is the total calculated width of this element. Except in IE's faulty box model, this includes the left and right padding, the left and right borders and the specified width of the element. This method does not work in IE4 or NS4. The second method is better than this first method because with this method, if the browser is less wide than the width of the element, the element's content that is off the left edge of the viewport won't be accessible.
This <p> has auto left and right margins as well as a width specified which centers it in CSS2 browsers. It will not work if the width is not specified or if this element is floated or absolutely positioned. Its parent element has text-align:center; to compensate for IE incorrectly applying text-align to block level elements instead of requiring the use of auto left and right margins. Block level elements are 100% of the available width by default, so there was no need to specify the width on the <div> that contains this paragraph. When IE6 is in standards compliant mode it handles centering correctly. To put IE6 in standards mode use a doctype with an URL. Any characters other than white space characters before the doctype will put IE6 back into IE5 compatibility mode. For example, adding the XML declaration before the doctype in XHTML pages will cause this bug.
This paragraph (<p>) does not have a set width. The left and right margins are set to specified widths instead. These 3 examples are slightly misaligned in Netscape 6 because of the vertical scrollbar. The wrapper div compensates for the scrollbar in the other browsers.
This paragraph (<p>) and it's parent element, which in this case is a <div>, both have position:relative set. It's parent has left: 30% set and it has left: -30% set. Neither element needs a set width when using this technique. If the inner element has a set width, then it needs to be the same as its parent's. The inner element can have borders, padding, and/or margins defined, however, the outer element can't.
If you have found any services on my site to be beneficial and would like to donate, please feel free to donate ANY amount you want. Thank you very much.
DOWN
.jpg){kind=link}
