CODEWITHSUNDEEP
htmlcss
bryan
bryan

Reputation: 9369

Fit two div's inside a variable width parent div

I have a long div that holds 4 elements in the following order:

icon       (fixed width)
item_name  [needs to fit inside]
item_type  [needs to fit inside]
item_date  (fixed width)

I am trying to figure out how to fit the item_name and item_type inside so that they always fit inside the div regardless of resize.

Here is a jsfiddle.

HTML

<div class="item">
    <div class="icon"><i class="fa fa-file-text-o"></i></div> 
    <div class="item_date">7:25 AM</div>
    <div style="border-top:1px solid green;width:500px;">
        <div class="item_name">Item name</div>
        <div class="item_type">Item type</div>
    </div>
</div>

CSS

.item {
    margin:0 auto;
    height:50px;
    background-color:#fff;
    width:80%;
    box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}
.item .icon {
    float:left;
    height:50px;
    width:75px;
    text-align:center;
    border-top:1px solid blue;
    font-size:23px;
    color:#252525;
    line-height:50px;
}
.item .item_date {
    float:right;
    text-align:right;
    width:100px;
    border-top:1px solid blue;
    height:50px;
    padding:0 25px;
    font-size: 13px;
    color:#999999;
    line-height:50px;
}
.item .item_name {
    float:left;
    display: inline-block;
    width:49%;
    height:50px;
    line-height:50px;
    border-top:1px solid purple;
}
.item .item_type {
    float:right;
    display: inline-block;
    width:49%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-weight:bold;
    border-top:1px solid yellow;
}

Upvotes: 0

Views: 1009

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

I would add overflow: auto to the div.item-panel element that contains the two floated blocks. Setting overflow: auto defines a block-formatting context and the floats are contained within the edges of the block, which is what you need in this case.

.item {
    margin:0 auto;
    height:50px;
    background-color:#fff;
    width:80%;
    box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}
.item .icon {
    float:left;
    height:50px;
    width:75px;
    text-align:center;
    border-top:1px solid blue;
    font-size:23px;
    color:#252525;
    line-height:50px;
}
.item .item_date {
    float:right;
    text-align:right;
    width:100px;
    border-top:1px solid blue;
    height:50px;
    padding:0 25px;
    font-size: 13px;
    color:#999999;
    line-height:50px;
}
.item-panel {
    border-top: 5px solid green;
    overflow: auto;
}
.item .item_name {
    float:left;
    width:49%;
    height:50px;
    line-height:50px;
    border-top:1px solid purple;
}
.item .item_type {
    float:right;
    width:49%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-weight:bold;
    border-top:1px solid yellow;
}
<div class="item">
    <div class="icon">X</div>
    <div class="item_date">7:25 AM</div>
    <div class="item-panel">
        <div class="item_name">First</div>
        <div class="item_type">Second</div>
    </div>
</div>

Upvotes: 1

Dan Russell
Dan Russell

Reputation: 970

It seems like since item has a width of 80%, and contains icon (75px wide) and item_date (100px wide), any time the window is squeezed there will be no room for item_name and item_type.

Try setting a min-width on item so that it doesn't totally collapse and leave no room for the inner divs:

.item {
    width: 80%;
    min-width: 400px;
 }

You may also want to set a min-width and/or margins on your inner divs to keep them to the size you want.

Upvotes: 0

Related Questions