I am working on a simple webpage that should take up the entire browser window. There are only two elements in it, but the issue is that the second element is being overlapped by 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>Enter company name</label>
<input name="key" onkeyup="showHint(this.value)"/>
<!-- <input type="submit"/> -->
</form>
<p id="results">Results: <span id="txtHint"></span></p>
</body>
Where could the problem be?
EDIT: I have noticed that the overlap only affects the background property of the second element (the word "Results" is displayed correctly). I was expecting the background to fill the remaining space of the browser starting from the end of the first element. Instead, it starts from the left side of the browser where the first element is positioned.