CODEWITHSUNDEEP
htmlcss
Stack crawler
Stack crawler

Reputation: 379

Separating 2 div contents

CSS:

h1
{
   display: inline-block;
   margin-right: 5px;
   float: right;   
}

.ControlsBox
{
   display: inline-block;
   padding: 10px 0;
   margin: 5px 0;
}

HTML:

<div class="ManagementBox">
    <div style="background-color: #397249;"> 
    <h1>This is h1</h1>
    <div class="ControlsBox" id="BatchOperations">
    <a><img ... ></a>
    <a><img ...></a>
    </div>
</div>

<div style="background-color: #ff6600;">
    <div  class="ControlsBox" id="FiltersBox">
    <select> ... </select> 
    <select> ... </select> 
    <input id="Filter_Phrase" name="Filter_Phrase" ...>
    </div>
 </div>

In the above code, what am I trying to do is to create a box (managementbox) which contains 3 parts: h1 which is pushed to the top-right corner, BatchOperations which is pushed to the top-left corner and finally filtersbox which has taken up the bottom part.

For doing this, I have separated filtersbox and the other two in different div elements (with different background colors). But when I run this they're mixed up. Why so?

Upvotes: 1

Views: 104

Answers (2)

Deepak gupta
Deepak gupta

Reputation: 554

div.upperBand {
    background-color: #397249;
}

    div.upperBand:after, div.upperBand:before {
        content: ' ';
        display: table;
    }

    div.upperBand:after {
        clear: both;
    }

    div.upperBand #BatchOperations {
        float: left;
    }

    div.upperBand h1 {
        display: inline-block;
        margin-right: 5px;
        float: right;
    }

div.lowerBand {
    padding: 10px 0;
    margin: 5px 0;
    background-color: #ff6600;
}
 <div class="ManagementBox">
        <div class="upperBand">
            <h1>This is h1</h1>

            <div class="ControlsBox" id="BatchOperations">
                <a>22</a>
                <a>33</a>
            </div>
            <!--<div style="clear:both;"></div>-->
        </div>

        <div class="ControlsBox lowerBand" id="FiltersBox">
            <div>
                <select> <option>2222</option> </select>
                <select>  <option>2222</option> </select>
                <input id="Filter_Phrase" name="Filter_Phrase" ...>
            </div>
        </div>
    </div>

Upvotes: 0

Siamak Ferdos
Siamak Ferdos

Reputation: 3299

You have wrong class naming on FiltersBox div Try:

 h1
    {
       display: inline-block;
       margin-right: 5px;
       float: right;   
    }    
    .ControlsBox
    {
    display: inline-block;
    padding: 10px 0;
    margin: 5px 0;  
        height:50px;
    }    

    #FiltersBox{
        clear:both;  
        display:block;
    }
<div class="ManagementBox">
            <div style="background-color: #397249;"> 
                <h1>This is h1</h1>

                <div class="ControlsBox" id="BatchOperations">
                    <a>22</a>
                    <a>33</a>
                </div>
            </div>

            <div  class="ControlsBox" id="FiltersBox" style="background-color: #ff6600;">
                <div>
                    <select> <option>2222</option> </select> 
                    <select>  <option>2222</option> </select> 
                    <input id="Filter_Phrase" name="Filter_Phrase" ...>
                </div>
            </div>
</div>

Fiddle

Upvotes: 1

Related Questions