David Croushore

A Man in Progress

Using Negative Margins in CSS

My first wedding anniversary is coming up in just a couple weeks.  Last year I made a website for the wedding that looked great, but had one tragic flaw.  In some browsers, the content would end up all the way at the bottom of the page, under the sidebar.  I had no idea why this was happening, and ultimately just let those with that browser suffer.

Today I found out the problem.  In CSS, when two floated elements don’t have enough space to fit next to each other, the one that shows up later in the document gets pushed to the bottom.  To get around this issue, it’s possible to add padding to one element (padding is like an internal margin in the CSS box model) and a corresponding negative border value to the other.  This allows the elements to overlap and gets rid of the nastiness. 

At this point, I think I’ve got enough CSS to turn this site into a design of my own.  Now I just need to go about designing the site so that I can create the CSS for it.

Comments
blog comments powered by Disqus