CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3658423
user3658423

Reputation: 1944

Setting div to rest of available space

I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.

<div id="parent"> 
    <div id="child-left" style="width:90%"> 
        This is my title
    </div>
    <div id="child-right"> 
        <i class="fa fa-cog"></i>
    </div>
</div>

Thanks!

Upvotes: 1

Views: 54

Answers (1)

BuddhistBeast
BuddhistBeast

Reputation: 2670

The following should help you:

HTML:

<div id="parent">
    <div id="child-right">Hey</div>
    <div id="child-left">This is my title</div>
</div>

CSS:

#child-left {
    border: 3px solid gray;
    background-color:blue;
    margin-left:0px;
    overflow:hidden;
}
#child-right {
    float:right;
    border-style:solid;
}
#parent {
    overflow:hidden;
}

DEMO JSFiddle

Upvotes: 2

Related Questions