CODEWITHSUNDEEP
htmlcsscss-float
Optimus Prime
Optimus Prime

Reputation: 6907

background color not filling entire div

I am having a problem in filling the entire center content (div) with a background color.

I want to fill element with id body-content with the blue color but its not actually stretching to full height.

enter image description here

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><!-- End of Search boxes -->

</div><!-- End of body content -->

CSS code

#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 tried searching for the problem and found a solution, that clear should be used to make floating items behave normally. But that too doesn't work. What am I missing?

Another problem was with the linear gradient, I wanted blue to extend till 50% height, but that fills upto 90%, when the blue color fills the entire body-content.

Upvotes: 1

Views: 21224

Answers (2)

xen-0
xen-0

Reputation: 709

First off, that code doesn't generate anything like that screenshot for me (frame is on top of the search boxes and the blue background goes further down). But replacing the position:absolute; in the #promo-video style to float: left; and adding another float:left to #search-boxes generated something similar to what you have.

In that situation, correcting your issue is simply a matter of adding <div style="clear:both;"></div> below the closing tag for search-boxes>

i.e. Use floats to get the layout you want.

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

Try this:

#body-content {overflow: hidden;}

That forces the body-content div to wrap around its floated contents. There are other methods for enclosing floats, but this tends to be the easiest.

Note, however, that because your iframe is set to position: absolute;, nothing will clear that except a height on the container, which is rarely a good idea. It would be better to float that too.

Upvotes: 4

Related Questions