Центральная фиксированная ширина/жидкость css макет с дисплеем: атрибут таблицы и минимальная/максимальная ширина

Цель состоит в том, чтобы центрировать этот макет на экране. У меня минимальная ширина 600 пикселей и максимальная ширина 1200 пикселей, поэтому вокруг макета потенциально много белого пространства.Центральная фиксированная ширина/жидкость css макет с дисплеем: атрибут таблицы и минимальная/максимальная ширина

Я пробовал много разных методов, но я смущен атрибутом display: table и тем, как он ведет себя в этом сценарии.

Вот в jsFiddle и код: http://jsfiddle.net/7M9rg/6/

спасибо за любые советы по этому вопросу!

HTML:

<div id="wrapper"> 
<div id="header"> 
</div> 

<div id="main"> 

<div id="side"> 
<div id="side-stuff"> 
<ul> 
<li><a href="../English/index.html">Home</a></li> 
</ul> 
</div> 
</div> 

<div id="content"> 
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has</p> 
</div> 
</div> 

<div id="footer">&copy; 2013 </div> 
</div>

CSS:

/*css reset*/ 
html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%; 
height:100%;} 
div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input, 
textarea,p,blockquote,th,td, figure {margin:0;padding:0;} 
ol,ul {list-style:none;} 
li {list-style-type: none;} 
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: 
border-box; } 


html, body { 
font-family: Helvetica; 
height: 100%; /*important for equal height columns*/ 
min-width: 650px; 
} 

#wrapper{ 
height: 100%; /*important for equal height columns*/ 
padding-bottom:130px; /*This must equal the height of your header*/} 

#header{ 
height: 130px; /*This must equal padding bottom of wrap*/ 
display:block; 
padding: 5px; 
color: #fff; 
border: thin solid #ebebeb; 
border-radius: 10px; 
margin: 10px; 
background-image: url(Images/gradient.png); 
background-repeat: repeat-x;  
width: 99%;} 

#main { 
position: relative; 
height: 100%; /*important for equal height columns*/ 
width: 99%; 
overflow:auto; 
display: table; /* This is needed fo children elements using display table cell*/ 
table-layout: fixed; 
padding-bottom: 50px; /*This needs to match footer height*/ 
overflow: auto; 
margin-left: 10px;} 

#side{ 
background-color: #fff; 
width: 150px; 
margin: 10px; 
vertical-align: top; 
padding-top: 20px; 
padding-right: 10px; 
display: table-cell; 
border-radius: 10px; 
border: thin solid #CCC;} 

#side-stuff{ 
display: block; 
padding-left: 10px;} 

#content{ 
background-color: #fff; 
padding: 10px; 
display: table-cell; /*To make sibling columns equal in height*/ 
margin-bottom:10px; 
border-radius: 10px; 
border: thin solid #CCC;} 

#content-stuff{ 
width: auto; 
height: auto;} 

#footer{ 
position: relative; 
height: 40px; 
margin-top: -40px; /* margin-top is negative value of height */ 
margin-left: 10px; 
clear: both; /* Use if floating elements */ 
color: #999; 
width: 99%; 
border: thin solid #ebebeb; 
border-radius: 10px; 
background-image: url(Images/footer_gradient.png); 
background-repeat: repeat-x; 
background-position: bottom;}

источник

2013-04-13 user2275661

Добавьте это в #wrapper CSS:

max-width: 1200px; 
margin: 0 auto;

http://jsfiddle.net/tshz6/

источник

2013-04-13 00:35:47 ssergei

Спасибо большое за ответ. Да, я сделал это первым, но для меня это не сработало. Я в тупик, что, похоже, работает в jsFiddle, но не тогда, когда я тестирую его в браузере. Хммм ... – user2275661

необходимо указать ширину для вашего <body> или #wrapper элемент. min-width определяет только минимум Ширина его может быть уменьшена до width и max-width установлена на auto, которая является доступной шириной (в данном случае шириной экрана). Попробуйте обновить свой html, body правило следующее

html, body { 
    font-family: Helvetica; 
    height: 100%; 
    margin: 0 auto; 
    min-width: 650px; 
    max-width: 1200px; 
}

источник

2013-04-13 00:42:11 Ejaz

Спасибо за быстрый ответ. Я уже пытался установить маржу, как указано в вашем примере, но это почему-то не делает этого. Я не уверен, что я понимаю ваш комментарий об указании ширины (что я бы не смог сделать с полужидкой компоновкой); должен ли я сделать что-нибудь еще? – user2275661

'У меня минимальная ширина 600 пикселей и максимальная ширина 1200 пикселей, поэтому вокруг макета может быть много свободного места. Если бы я понял это правильно, вы хотите, чтобы ширина вашей страницы между« 650px и 1200px »в зависимости от разрешение экрана пользователя. CSS в ответе устанавливает 'max-width' так, что он не становится шире, чем' 1200px' и 'margin: 0 auto' центрирует его. Попробуйте это jsfiddle http://jsfiddle.net/7M9rg/8/ – Ejaz

BTW, попробуй обновить свой html, правилу тела следуя за мной, я хотел заменить правило 'html, body', которое приходит после правил _reset_ – Ejaz

Центральная фиксированная ширина/жидкость css макет с дисплеем: атрибут таблицы и минимальная/максимальная ширина

ответ

Смежные вопросы