I've encountered an issue with filling the center content (div) with a background color.
The element with id body-content should be filled with a blue color, but it's not stretching to full height as expected.
Sample HTML code:
<div id="body-content">
<iframe id="promo-video" width="40%" height="315" src="" frameborder="0" allowfullscreen style="margin-bottom: 20px;"></iframe>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var y_pos = $('#search-panel').position().top;
$('#promo-video').css('top',y_pos);
});
function sho(a){
if (a=='1'){
document.getElementById('criteria-1').style.display = "block";
document.getElementById('criteria-2').style.display = "none";
document.getElementById('criteria-3').style.display = "none";
}
else if (a=='2'){
document.getElementById('criteria-1').style.display = "none";
document.getElementById('criteria-2').style.display = "block";
document.getElementById('criteria-3').style.display = "none";
}
else if (a=='3'){
document.getElementById('criteria-1').style.display = "none";
document.getElementById('criteria-2').style.display = "none";
document.getElementById('criteria-3').style.display = "block";
}
}
</script>
<div id="search-boxes">
<div id="search-panel">
<form id="search-form" name="search-form" onsubmit="return false;">
<fieldset style="margin-bottom:8px;">
<legend><i>Find By</i></legend>
<input type="radio" name="sp" onclick="sho(1);" checked/>A
<input type="radio" name="sp" onclick="sho(2);"/>B
<input type="radio" name="sp" onclick="sho(3);"/>C
</fieldset>
<p>
<select name="spe" id="criteria-1">
<option value="g">G</option>
<option value="c">C</option>
<option value="ge">Ge</option>
</select>
<input type="text" style="width:97%;vertical-align:center;display:none;height:24px;padding-left:8px;" placeholder="Or find a.." id="criteria-2"/>
<input type="text" style="width:97%;vertical-align:center;display:none;height:24px;padding-left:8px;" placeholder="Or find b.." id="criteria-3"/>
</p>
<select name="city" style="width:49%;">
<option value="any-city">In City</option>
<option value="mumbai">Mumbai</option>
<option value="nyc">New York</option>
</select>
<select name="locality" style="width:49%;">
<option value="anywhere">Near Area</option>
<option value="vasant-vihar">Vasant Vihar</option>
<option value="andheri">Andheri</option>
</select>
<br><br>
<input type="submit" class="button_g" name="submit-search" value="Search for A">
</form>
</div>
</div>
</div><!-- End of Search boxes -->
</div><!-- End of body content -->
CSS styles:
#search-boxes{
margin: 40px;
display: inline-block;
float: right;
margin-right: 8%;
clear: both;
width: 450px;
}
#search-panel{
border: 6px solid #c6e7f8;
}
#search-panel{
text-align: center;
padding: 30px;
padding-top: 20px;
padding-bottom: 20px;
width: 400px;
background-color: #ffffff;
font-family: "Segoe UI Semibold", sans-serif;
}
#search-boxes select{
width: 100%;
height: 30px;
}
#promo-video{
position: absolute;
margin-left: 8%;
border: 6px solid #d9d9d9;
}
#body-content{
background-color: #e9f6fc;
/* background: linear-gradient(to bottom, #e9f6fc 50%, white);
background: -webkit-linear-gradient( to bottom, #e9f6fc 50%, white);
background: -moz-linear-gradient( to bottom, #e9f6fc 50%, white);
background: -o-linear-gradient( to bottom, #e9f6fc 50%, white);
*/ margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 40px;
vertical-align: middle;
}
I attempted to solve the problem by using the clear property for floating items, but it didn't work. What could I be missing?
Another challenge arose with the linear gradient, where I intended for the blue color to extend only up to 50% height, yet it fills up to 90% when the blue color spans the entire body-content.