Масштабирование ширины жидкости с использованием 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 «распорка» соответствует шаблон {height: 1px; clear: both;}

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

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

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

3. topMenuNavBar, что плавает влево в элементе topMenuContainer

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

Answer 1

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

http://layouts.ironmyers.com/

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

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