Надеюсь, я предоставлю достаточно информации, чтобы бороться с ошибочным названием.
Я разрабатываю веб-сайт, который имеет два основных раздела: боковую панель и раздел контента. Боковая панель находится слева, а контент — справа. На данный момент у меня есть эта разметка и CSS:
<section id="sidebar">
sidebar
</section>
<section id="content">
content
</section>
#sidebar {
width: 29%;
background: #f7f3ed;
float: left;
padding-right: 1%;
text-align: right;
}
#content {
width: 69%;
padding-left: 1%;
float: left;
}
Надеюсь, вы видите, что я пытаюсь сделать здесь. Я хочу, чтобы боковая панель и области контента определялись процентами, чтобы при изменении размера окна браузера они оставались в форме.
Однако я хочу, чтобы боковая панель имела границу в 1 пиксель справа, которая отделяет ее от области содержимого. Когда я добавляю это, область контента перемещается ниже боковой панели, потому что общая ширина на 1 пиксель больше 100%.
Вот пример jsfiddle: http://jsfiddle.net/juffd/
Как я могу применить границу без переноса области содержимого под боковую панель и без специального указания ширины каждого элемента в пикселях?
