CSS, выравнивание содержимого заголовка HTML с навигационной панелью

Question

я иметь заголовок, который имеет один DIV и два пролеты внутри него:

<header class="page_header"> 

      <div id="title">Some title</div>  
      <span id="user">User: <i>${username }</i></span> 
      <span id="search"/><input type="text"><input type="submit" value="Search"/></span> 

CSS стиль для содержания заголовка является:

.page_header { 
    padding: 30px; 
    margin: 10px; 
    width: 940px; 
} 
.page_header #user { 
    float: left; 
    margin: 0; 
} 
.page_header #title { 
    text-align: center; 
    font-size: 24px; 
} 
.page_header #search { 
    float: right; 
    text-align: right; 
} 

Underneat заголовка это панель навигации. Проблема, с которой я сталкиваюсь, заключается в том, что содержимое заголовка немного смещено вправо, по сравнению с панелью навигации, и я не могу найти способ исправить это. Вы можете увидеть код HTML и CSS здесь: http://jsfiddle.net/vvozar/QU542/1/

Цените любую помощь или совет.

Answer 1

Добавить box-sizing: border-box в ваш .page_header класс.

FIDDLE

.page_header { 
    padding: 30px; 
    margin: 10px 0; 
    width: 940px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 2

В page_header, вам необходимо либо (в порядке технического предпочтения)

• Удалить ширину, и пусть это авто размер, или
• Установите ширину 880px на счет для 60px набивки вокруг внутри или
• Снимите прокладку и оставьте ширину 940px.

Ваше тело также фиксируется на 940px и технически внутри page_header имеет только 880px работать, так, 940px толкнул ее за ее пределами, или, в данном случае, из правой части дел.