Текст заголовка за пределами заголовка DIV

Question

Знаете ли вы, почему текст «Текст слева» и «Текст справа», который должен находиться в моем заголовке, синий DIV находится под ним? Похоже, в верхней части текста есть что-то неожиданное. JS Fiddle here.

CSS:

#header { 
    width: 100%; 
    height: 18px; 
    background: #0064C5; 
} 
#header p.left { 
    float:left; 
    color:#000; 
} 

#header p.right { 
    float:right; 
    color:#000; 
} 

Answer 1

маржу по умолчанию на <p> просто добавить margin: 0; к #header p.left

jsFiddle

Answer 2

Попробуйте

Добавить поле: 0 в #header р

#header { 
    width: 100%; 
    height: 18px; 
    background: #0064C5; 
    clear: both; 
} 
#header p { margin:0;} 
#header p.left { 
    float:left; 
    color:#000; 

} 

#header p.right { 
    float:right; 
    color:#000; 

} 

Answer 3

просто удалить float:left;#header p.lef в т

Попробуйте этот код

#header p.left { 
    color:#000; 
} 

Вместо

#header p.left { 
    float:left; 
    color:#000; 
} 

Смотреть этот проект: http://jsfiddle.net/Grek/bZsck/

Answer 4

Потому что заголовок имеет фиксированную высоту.

#header { 
width: 100%; 
overflow:hidden; 
background: #0064C5;} 

Удалить высоту, добавить переполнение (поскольку header.p имеет поплавок);