CODEWITHSUNDEEP
htmlcsscss-float
Sonia
Sonia

Reputation: 253

Floating elements the first one overlaps the second

I trying to do a simple page that takes the entire browser window. It contains inly two elements, the problem is that the second one is overlapped from the first

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>

Where is the problem?

EDIT: I noted that the overlap effect only the backgorund property of the second element (the "Risultati" word is normally floated). I expect that the background occupy the rest of the space of the browser starting from the ending of the first element. Instead it begins from the left side of the browser where the first element is positioned.

Upvotes: 0

Views: 103

Answers (1)

sbeliv01
sbeliv01

Reputation: 11820

One element is float: left while the other is not; this is causing the overlap. Try adding float: left to the #risultati declaration in your CSS:

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

Upvotes: 3

Related Questions