Разметка ширины жидкости с использованием CSS

Question

Я пытаюсь собрать страницу с заголовком, охватывающим всю страницу.

заголовок содержит пункты меню и выглядит примерно так (рендеринг ASCII ниже)

<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) -->

-----------------------------------------------------------------------------------------
  LOGO HERE (Fixed Width)     |    Menu One  |  Menu Two | menu Three | Menu Four      
                              |              |           |            |                
----------------------------------------------------------------------------------------- 

Я разработал это в HTML так:

<div id="topMenu">
    <div id="topMenuLogo"><!-- flash logo stuff here --></div>
    <div id="topMenuContainer">
       <div id="topMenuTopBar" class="right-align">
           <div class="useroption floatleft">Action 1</div>
           <div class="useroption floatleft">Action 2</div>
           <div class="spacer">&nbsp;</div>
       </div>
       <div id ="topMenuNavBar">
           <div id=topmenuMenuContainer">
              <ul>
                 <li>Menu One</li>
                 <li><!-- Other menus follow below ...... --></li>
              </ul>
           </div>
        </div>
       <div class="spacer">&nbsp;</div>
    </div>
    <div class="spacer">&nbsp;</div>        
</div>

где CSS-класс 'spacer' соответствует шаблону {height: 1px; clear: both;}

Я хочу написать выше, чтобы страница динамически расширялась, чтобы соответствовать экрану, независимо от разрешения. Логотип имеет фиксированную ширину, поэтому он не изменяется, но я хочу, чтобы элемент погружения topMenuContainer динамически регулировал свою ширину в зависимости от размера экрана. в основном этот элемент будет содержать следующее:

1. Элемент topMenuContainer, который расширяется или сжимается, зависит от разрешение экрана

2. topMenuTopBar, который всплывает прямо в элементе topMenuContainer

3. topMenuNavBar, который перемещается слева в элементе topMenuContainer

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

Answer 1

Это должен быть ресурс № 1 для общих вопросов макета, подобных этим:

http://layouts.ironmyers.com/

Вы найдете любой макет CSS, который вы можете захотеть на его сайте. Если вы еще не знаете CSS, вы можете ознакомиться с руководствами в w3schools:

http://www.w3schools.com/css/