Расширение и заключение контрактов на содержание сайта

Question

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

Вот две фотографии, визуализируя, что я пытаюсь сделать:

http://i.stack.imgur.com/AKBme.png

http://i.imgur.com/ct3RN.png

Когда браузер расширяет боковую панель по-прежнему сохраняет свою первоначальную ширину, но «содержание сайта «почти удвоилось, чтобы заполнить пространство.

Единственный способ, которым я был в состоянии получить содержание сайта, чтобы расширить это также боковая панель расширения, например:

<style> 
#sidebar{ 
width:20%; 
float:right; 
} 
#sitecontent{ 
width:80%; 
float:left; 
} 
</style> 

Любые идеи?

Answer 1

<style> 
#sidebar{ 
    width: 256px; /* Use a fixed width for your sidebar. */ 
    float: right; 
} 
#sitecontent{ 
    display: block; 
    float: left; 
} 
</style> 

Answer 2

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

Приветствия.

Answer 3

Попробуйте это:

#sidebar { 
    float: left; width: 200px; /* or whatever */ 
} 
#sitecontent { 
    width: 100%; 
    box-sizing: border-box; // also -webkit-box-sizing, -moz-box-sizing, maybe -o-box-sizing 
    padding-left: 200px; /* same as sidebar */ 
} 

С помощью «пограничного ящика» коробки проклейки — который не будет работать в IE менее 8 — вы можете установить ширину блока контента на 100% и имеют то, что включают отступы (и/или границы).