Geek Answers Handbook

CSS box model selection button on the page below

Hi, I am trying to fix some test html for working with opera / chrome. He uses a saint's boot model from a matte levine .

In IE and firefox, it looks like

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

In chrome, opera and safari, he pushes the sidebar element down. I played with margins and pads, but it still doesn't work. Did I miss 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>
+3
source share
2 answers

I got it to work in Safari and Firefox (have not tested other browsers yet)

Change this:

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

, , , , :)

, BlueprintCSS. , . ( , ), .

+2

, , min-width BODY, , IE ( , Firefox, ). , DIV .

0

More articles:


All Articles