Блог

У меня действительно жесткий макет, который я просто не могу разрешить..

 - Left column - Fixed,Static (always in view)
- Right column - Fluid/liquid/scrollable
--- Header - fixed 
--- left/main fluid/liquid
--- Right/sidebar - fixed width
--- footer
  

(если вышесказанное непонятно — верхний, левый / основной, правый / сайдбар, нижний колонтитул находятся ВНУТРИ правого столбца)

теперь этот макет вроде как работает ,

 <div id="left-col">left col</div>

<div id="container">

    <div id="header">header</div>
    <div id="main">
        <div id="sidebar">sidebar</div>
        main
    </div>
    <div id="footer">footer</div>
</div>

#left-col {
    width: 50px;
    position: fixed;
    background: yellow;
    left: 0;
    top: 0;
}
#container {
    margin-left: 50px;
    background: black;
}
#header {
    background: green;
}
#main {
    background: blue;
    position: relative;
}
#sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    background: pink;
}
#footer {
    background: red;
}
  

но все же у меня есть одна досадная проблема —
когда основное содержимое недостаточно длинное — боковая панель и нижний колонтитул перекрываются ..
Это потому, что боковая панель расположена в абсолютном положении — но опять же, если я сделаю ее относительной, и страница изменит размер, боковая панель перейдет ПОД основную … (недостаточно места для fluid …)
итак, мой вопрос заключается в следующем ,
У кого-нибудь есть идея, как сохранить нижний колонтитул ПОД боковой панелью? (Липкие трюки jQuery не работают, а трюки CSS здесь довольно хитрые ..)
или какие-либо другие ide для достижения такого макета?

JSFIDDLE:http://jsfiddle.net/VNU6Z /

Вы можете использовать float: right вместо position absolute

пример

Ким прав. Сделайте div id="sidebar" float: right и сделайте div id="main" overflow:hidden

div id="main" затем изменит размер ваших плавающих элементов, как если бы у него был float: left