Блочная модель CSS, толкающая элемент ниже на странице - PullRequest
Новая
       7

Блочная модель CSS, толкающая элемент ниже на странице

3 голосов
/ 22 декабря 2008

Привет, я пытаюсь исправить немного тестового HTML для работы с Opera / Chrome. Используется модель Holygrail из Мэтта Левина .

В IE и Firefox это выглядит как

правильный макет http://img187.imageshack.us/img187/4049/writedn1.jpg

В Chrome, Opera и Safari он толкает элемент боковой панели вниз. Я играл с полем и отступами, но он все еще не работает. я что-то упустил?

неправильный макет 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>

Ответы [ 2 ]

2 голосов
/ 22 декабря 2008

Я получил его для работы как в Safari, так и в Firefox (другие браузеры еще не тестировали)

Изменить это: 

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

Не знаю, почему это работает лучше, чем у вас выше, но это так:)

Если вы ищете готовые макеты на основе сетки, я бы предложил BlueprintCSS . Я использовал его для нескольких проектов, и он действительно прост в использовании. Это фиксированная схема (не такая, как у вас), так что это может нарушить условия сделки.

0 голосов
/ 22 декабря 2008

Хорошо, я знаю, что минимальная ширина не работает с тегом BODY, по крайней мере, в некоторых версиях IE (хотя я думал, что это работает в Firefox) Возможно, вы захотите поместить всю страницу в тег DIV и установить для него минимальную ширину.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...