Search the Community

I have often wanted space beneath the container div so that if rounded corners were used they would display well and not curve into the bottom of the screen. I tried to get that space by adding a bottom margin to a div (any div!) using the technique above, but it would never work for me. I did find a way that worked (at least for me) and it did use margins. When I set up the page I use a container div and inside that insert nested divs; for example, a text div (floated right or left), a sidebar div (floated right or left) and a footer div (cleared both). Then I add a top margin to the footer div as shown below (I use Dreamweaver and add that space in the Positioning panel). #footer { clear: both; position: relative; top: 20px; } Because of some quirk in html, if I add a 20 pixel margin at the top of the nested footer div, a 20 pixel space will appear at the bottom of that div that does not make the container div an additional 20 pixels high, effectively adding a 20 pixel space below the container div. This raises the bottom of the container div 20 pixels off the bottom of the screen and the rounded corners are completely displayed. I hope this technique helps anyone who was having the same problems I was, and who are also hovering dangerously close to frustrated insanity.