Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- CSS Trick: Target only IE with an if statement
- Open source Dreamweaver alternatives
- 8 job boards, for freelance web designers, that don't suck
- CSS fix for the double margin float bug in IE6
Categories
Using negative margin in CSS
Posted on Monday, December 10th, 2007 under CSS, web design news by Dustin Brewer.There are a lot of times when you want something to just be a few pixels higher than it is. Unfortunately for you the container of that element starts to soon. So you need to move it outside of the box. Your options in CSS? You can either use relative positioning or you can use negative margin. I’ll go over in another article so for now we will discuss the handy ability to use negative margin on objects.Using negative margin definitely isn’t complicated but most people don’t even know it is possible. The idea is simple, instead of using a positive number to assign the margin of an element you can use negative margin to take that element outside of its container. This can be handy for all kinds of things, especially if you are just moving an object a few pixels.
1 | #headerContainer {margin-top: -4px;} |
It is as simple as that and you can adjust an object to be nearly anywhere you want it to be. The only issue you may run in to is that the object you are trying to place may not be a block-level element and therefore may have trouble getting it to work cross-browsers without floating it or assigning its display attribute to block.
1 | #headerContainer {margin-top: -4px;display: block; width: 800px;} |
Sorry for the short and sweet post, spent too much of the weekend migrating my blog over to Wordpress and testing everything to make sure it works. I’ll try and post another CSS article later today, everything is frozen here in Oklahoma so I think I’ll be staying home to avoid car wrecks and curb accidents.
Whats Next?
One Response to “Using negative margin in CSS”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
[...] any cross browser issues that may develop from its use. This article is a complimentary article to using negative margin to position objects. With both of these ideas in hand you become a much more powerful designer and can move towards [...]