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 Link to comment https://forums.phpfreaks.com/topic/88772-centre-div/ 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> Link to comment https://forums.phpfreaks.com/topic/88772-centre-div/#findComment-455058 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? Link to comment https://forums.phpfreaks.com/topic/88772-centre-div/#findComment-455220 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> Link to comment https://forums.phpfreaks.com/topic/88772-centre-div/#findComment-455264 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.