Dysan Posted January 31, 2008 Share Posted January 31, 2008 Hi, how do I display a centred div, that keeps the margins in tact, similar to the page found at yell.com Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 1, 2008 Share Posted February 1, 2008 Either use padding on the Basement itself. Or create a containing div, like this: <style type="text/css"> #basement { width: 55em; min-height: 40em; } .CenterContentBox { padding: 1em; } </style> It may be better to do something like: <style type="text/css"> #basement { position: relative; width: 55em; min-height: 40em; } /* Corner's on Basement */ .TopRightC { position: absolute; top: 0; right: 0; background: url("CornerImg1.jpg"); } .TopLeftC { position: absolute; top: 0; left: 0; background: url("CornerImg1.jpg"); } .BottomRightC { position: absolute; bottom: 0; right: 0; background: url("CornerImg1.jpg"); } .BottomLeftC { position: absolute; bottom: 0; left: 0; background: url("CornerImg1.jpg"); } .CenterContentBox { padding: 1em; /* Using padding since FireFox doesn't render margin correctly */ } </style> Quote Link to comment Share on other sites More sharing options...
Dysan Posted February 1, 2008 Author Share Posted February 1, 2008 What would the HTML be for your CSS you posted? Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 1, 2008 Share Posted February 1, 2008 What would the HTML be for your CSS you posted? Off-hand, The full code would be something like: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="dk"> <head> <style type="text/css"> #basement { position: relative; width: 55em; min-height: 40em; border: 1px solid black; /* Border */ } /* Corner's on Basement */ .TopRightC { position: absolute; top: -1px; right: -1px; background: url("CornerImg1.jpg"); } .TopLeftC { position: absolute; top: -1px; left: -1px; background: url("CornerImg1.jpg"); } .BottomRightC { position: absolute; bottom: -1px; right: -1px; background: url("CornerImg1.jpg"); } .BottomLeftC { position: absolute; bottom: -1px; left: -1px; background: url("CornerImg1.jpg"); } /* The Content Div'(s) */ .CenterContentBox { padding: 1em; /* Using padding since FireFox doesn't render margin correctly */ } </style> </head> <body> <div id="Basement"> <div class="TopLeftC"></div> <div class="TopRightC"></div> <div class="BottomLeftC"></div> <div class="BottomRightC"></div> <div class="CenterContentBox"> <p>This is the Content</p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.