Плавающие элементы первый перекрывает второй

Я пытаюсь сделать простую страницу, которая занимает все окно браузера. Он содержит только два элемента: проблема заключается в том, что вторая перекрывается с первогоПлавающие элементы первый перекрывает второй

form 
{ 
    background-color:#996600; 
    width:30%; 
    height:100%; 
    float:left;  
    font:"Arial Black", Gadget, sans-serif; 
    color:#FFF 
} 

#risultati 
{ 
    width:70%; 
    background-color:#0099FF; 
    font:"Arial Black", Gadget, sans-serif; 
    color:#FFF 
} 


<body> 

<form action""> 
<label>Inserisci ragione sociale</label> 
    <input name="chiave" onkeyup="showHint(this.value)"/> 

<!-- <input type="submit"/> --> 
</form> 

<p id="risultati">Risultati: <span id="txtHint"></span></p> 


</body>

В чем проблема?

EDIT: Я заметил, что эффект перекрытия отражает только свойство backgorund второго элемента (слово «Risultati» обычно плавает). Я ожидаю, что фон займет остальную часть пространства браузера, начиная с окончания первого элемента. Вместо этого он начинается с левой стороны браузера, где расположен первый элемент.

источник

2013-02-08 Sonia

Один элемент - float: left, а другой нет; это вызывает перекрытие. Попробуйте добавить float: left к #risultati декларации в вашем CSS:

#risultati 
{ 
    width:70%; 
    background-color:#0099FF; 
    font:"Arial Black", Gadget, sans-serif; 
    color:#FFF; 
    float: left; 
}

источник

2013-02-08 16:55:38 sbeliv01

OMG он работал .. Я клянусь, что уже судимый это решение, прежде чем опубликовать Anwer, но не работает. Спасибо, что помогли мне, и извините за вопрос noobish :( – Sonia

Во всяком случае это не идеально. Второй элемент не связан с первым, но его позиционирует один ряд под – Sonia

Плавающие элементы первый перекрывает второй

ответ

Смежные вопросы