CSS двухколоночный макет выровнен по левому краю?

Question

У меня простой дизайн.Слева находится панель навигации, справа - раздел содержимого.Я просто плавал влево и плавал вправо, и это работает - если только монитор не слишком широкий.Тогда навигационная панель находится далеко слева (как и должно быть), но контент цепляется вправо.Середина пустое пространство.Я хочу, чтобы содержимое цеплялось рядом с навигационной панелью слева.

Как мне это сделать?

Answer 1

Как насчет смещения их обоих влево и использования процентных значений для установки их ширины .. Как показано ниже:

#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}

Или, если вы хотите зафиксировать размер боковой панели и заполнить содержимоеОстальное пространство вы можете сделать следующее (я использую его все время):

HTML:

<div id="content"><div class="in">
CONTENT HERE
</div></div>

<div id="sidebar">
SIDEBAR HERE
</div>

CSS:

#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
     #content .in {margin-right:300px;
                   /*sidebar's width or more for space between blocks*/}

Answer 2

Есть много способов сделать это.

Это зависит:

• , если вы хотите, чтобы макет фиксированной ширины или относительный.
• , если вы хотите, чтобы макет был в центре или нет.
• и т. Д.

Эскиз того, что вы хотите, и / или ваш реальный код поможет.

В любом случае, если вы не знаете макет CSS, вы могли быиспользуйте CSS-фреймворк, такой как blueprint , который прост в использовании и самостоятельно решает вашу текущую проблему.