Переменная ширина содержимого фиксированная ширина боковой панели макета

Question

Я искал по форумам, но не могу получить точный ответ на вопрос. Я хочу настроить макет моего блога на http://techtites.com/, чтобы сделать гибкую ширину области содержимого, которая изменяется, когда браузер меняет ширину, не нажимая боковую панель на дно.

В настоящее время это фиксированная ширина.

Основные стили, которые я играл с являются:

#wrapper { 
width:960px; 
margin:0 auto; 
} 

#content { 
padding:25px 0; 
} 

section { 
float:left; 
width:660px; 
margin-right:20px; 
} 

aside { 
float:left; 
width:280px; 
} 

Я хочу сделать раздел ширина быть динамичным, сохранив при этом в сторону сидеть справа от окна.

Answer 1

Измените стили к этому

section { 
    float:left; 
    width:100%; 
    margin-right: -280px; 
} 

aside { 
    float:left; 
    width:280px; 
} 

Live example

Answer 2

section { 
    float:left; 
    width:660px; 
    margin-right:20px; 
    height:100px; 
} 

aside { 
    height:100px; 
    margin-left: 670px; 
} 

live demo

Answer 3

использования позиционирования. установите ваш #wrapper div на position: relative;, это будет позиционировать все дочерние элементы этого div относительно его, а не окно браузера.

Теперь положение вашей стороне в левом верхнем углу #wrapper DIV

aside { 
    width: 280px; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

и, наконец, дать достаточно отступы в разделе DIV, так что он все еще может расширяться и сжиматься, но он оставляет достаточно места для в стороне. Вы хотите, чтобы отступы были равны ширине в сторону (в данном случае 280px).

section { 
    padding-right: 280px; 
} 

Я терплю пример все это на jsFiddle: jsfiddle.net/2e9HM/6/

БОНУС: если вы действительно хотите получить фантазии, вы можете установить max-width вашего #wrapper DIV так, что страница является гибким в этом размере. Если вы сделаете это, убедитесь, что вы также установили min-width (равный размеру вашего в сторону), чтобы сторона не попала за пределы #wrapper, когда окно полностью сжато.

Answer 4

решение Morphius является лучшим до сих пор - для примера, см http://codepen.io/anon/pen/wBBdgg

.blbx { 
 
background:blue; 
 
width: calc(100% - 100px); 
 
    height:50px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    text-align:center; 
 
    
 
    
 
    
 
} 
 

 
.rdbx { 
 
background:red; 
 
display:inline-block; 
 
    height:50px; 
 
    width: 100px; 
 
    vertical-align:top; 
 
    
 
} 
 

 
.surround { 
 
\t 
 
    width: 100%; 
 
    height:50px; 
 
    
 
} 
 

 
.myimg { max-width:100%; 
 
    max-height:100%; 
 
}

<div class='surround'> 
 
    <div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg"> 
 
    </div><div class="rdbx"></div></div>

Answer 5

Может быть, это будет делать:

section { 
    float:left; 
    width:100%; 
    padding-right:250px; 
    height:100px; 
} 

aside { 
    float: left; 
    width: 250px; 
    min-height: 100%; 
}