Home/ Questions/Q 90593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T22:53:51+00:00

Hi I’m trying to fix a bit of test html to work with opera/chrome.

  • 0

Hi I’m trying to fix a bit of test html to work with opera/chrome. It’s using the holygrail box model from matt levine.

In IE and firefox it looks like

correct layout http://img187.imageshack.us/img187/4049/writedn1.jpg

In chrome, opera and safari it pushes the sidebar element down. I’ve played with the margin and paddings but it still doesn’t work. am I missing something?

wrong layout http://img73.imageshack.us/img73/6279/wrongpx8.jpg

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html> <head>     <style type='text/css'>         body {           min-width:500px;           padding: 0 106px;         }         #center, #left, #right,#sidebar,#main {           position:relative;           float:left;         }         #center {           width:100%;           background:#CCC;         }         #left {           width:106px;           margin-left: -100%;           right:106px;           background:#C0C;         }         #right {           width:106px;           margin-right: -106px;           background:#CC0;         }         #header{           width:100%;           background:#0CC;         }         #footer{           width:100%;           background:#A0E;           clear:both;         }         #content{           padding-right:330px;           background:#F00;         }         #main{           width:100%;           padding:5px 15px;         }         #sidebar{           width:300px;           margin-right: -300px;           background:#33C;         }      </style> </head> <body> <div id='center'>   <div id='header'>header</div>   <div id='content'>     <div id='main'>       copy     </div>     <div id='sidebar'>       side     </div>   </div>   <div id='footer'>footer</div> </div> <div id='left'> left </div> <div id='right'> right </div> </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I got it to work in both Safari and Firefox (haven’t tested the other browsers yet)

    Change this:

    #content{       padding-right:300px;       background:#F00; } #main{       padding:5px 15px;       width: 100%;       margin-right: -30px; }

    Dunno why this works any better than what you have above, but it does 🙂

    If you’re looking for premade grid-based layouts, though, I’d suggest BlueprintCSS. I’ve used it for a bunch of projects, and it’s really easy-to-use. It is a fixed layout (not fluid like yours), so that may be a deal-breaker.

    • 0