Боковая панель и контент не корректируют ширину должным образом - PullRequest
Новая
       30

Боковая панель и контент не корректируют ширину должным образом

0 голосов
/ 23 февраля 2012

В настоящее время я бегаю кругами с моим фактически очень простым CSS.Я пишу интерфейс для почтового клиента и получил основной (основной) контейнер, содержащий боковую панель и «innerContainer», который должен заполнить пространство, оставшееся после боковой панели.

Важный HTML: 

    <div id="outerContainer">
        <div id="sideBar">
        </div>
        <div id="innerContainer">
            <!-- not important ;D -->
        </div>
    </div>

Важные CSS: 

#sideBar {
    margin: 4px 2px 4px 4px;
    height: 644px;
    width: 14%;
    min-width: 220px;
    border-radius: 4px;
    background-color: #fff;
    float: left;
}

#innerContainer {
    margin: 4px 4px 4px 2px;
    height: 644px;
    border-radius: 4px;
    background-color: #fff;
    float: right;
}

В настоящее время я пытаюсь позволить клиенту определить идеальную ширину, не используя свойство width в правилах для #innerContainer.Используя это, это просто 0px, хотя поле должно оставить 4px пробел между обоими элементами.Использование фиксированной ширины (или процентов) делает его ужасным при изменении разрешения экрана на что-либо широкоэкранное.

Буду признателен за любые советы, не стесняйтесь запрашивать больше кода, снимков экрана или чего-то в этом роде.Заранее спасибо!

РЕДАКТИРОВАТЬ: JSFiddle

Ответы [ 3 ]

0 голосов
/ 23 февраля 2012 
#sideBar {
  float:left;
}
#innerContainer {
  display:table-cell;
  zoom:1;/*for IE*/
}

проверить это - http://jsfiddle.net/fRBWe/11/

0 голосов
/ 23 февраля 2012

Что если вы отделите основной макет от интервала?

Итак .. 

<div id="outerContainer">
    <div id="sideBar-wrap">
        <div id="sideBar">
        </div>
    </div>
    <div id="innerContainer-wrap">
        <div id="innerContainer">
            <!-- not important ;D -->
        </div>
    </div>
</div>

А потом 

#sideBar-wrap {
    height: 644px;
    width: 14%;
    min-width: 220px;
    float: left;
}
#sideBar {
    margin: 4px 2px 4px 4px;
    background-color: #fff;
    border-radius: 4px;

}
#innerContainer-wrap {
    margin: 4px 4px 4px 2px;
    height: 644px;
    float: right;
}
#innerContainer {
    border-radius: 4px;
    background-color: #fff;
}
0 голосов
/ 23 февраля 2012

Немного изменил ваш css .. вот новый css 

body , html{
width:100%;
height:auto;
}

#sideBar {
margin: 0px 2px 4px 4px;
height: 644px;
width: 14%;
min-width: 220px;
border-radius: 4px;
background-color: black;
float: left;
}

#innerContainer {
margin: 4px 4px 4px 2px;
height: 644px;
border-radius: 4px;
background-color: pink;
}​

Вы можете проверить демо здесь

DEMO

...