Make Div Fill Up Remaining Space

Question

i have 3 divs conatined within an outer div. i am aligning them horizontally by floating them left. and div3 as float right

always sh

Solution 1:

What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/

CSS:

#container{
    width: 100%;
    float:left;
    overflow:hidden; /* instead of clearfix div */
}
#right{
    float:right;
    width:50px;
    background:yellow;
}
#left{
    float:left;
    width:50px;
    background:red;
}
#remaining{
    overflow: hidden;
    background:#DEDEDE;
}

Body:

<div id="container">
    <div id="right">div3</div>

    <div id="left">div1</div>

    <div id="remaining">div2, remaining</div>
</div>

Solution 2:

This is a technique using display: table;https://jsfiddle.net/sxk509x2/

Browser support (ie 11+): http://caniuse.com/#feat=css-table

HTML

Baca Juga

<divclass="outer"><divclass="static pretty pretty-extended">$</div><inputclass="dynamic pretty"type="number" /><divclass="static pretty">.00</div></div>

CSS

.outer{
    width:300px;
    height:34px;
    display:table;
    position: relative;
    box-sizing: border-box;
}
.static{
    display:table-cell;
    vertical-align:middle;
    box-sizing: border-box;
}
.dynamic{
    display:table-cell;
    vertical-align:middle;
    box-sizing: border-box;
    width: 100%;
    height:100%;
}
.pretty{
    border: 1px solid #ccc;
    padding-left: 7px;
    padding-right: 7px;
    font-size:16px;
}
.pretty-extended{
    background: #eee;
    text-align:center;
}

The classes that contain "pretty" are not required to accomplish what you are trying to do. I just added them for appearances.

Solution 3:

You don't need to float #div2, it'll automatically fill up the remaining space.

If you want borders/padding, you ought to give #div2 a child element.

Html5 Website

Make Div Fill Up Remaining Space

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Make Div Fill Up Remaining Space"