CODEWITHSUNDEEP
htmlcss
Tomas
Tomas

Reputation: 18097

Set a floating div's width to take up remaining space

I would like to make display-field divs to take up the whole remaining width. Now the display-field width is equal to text length. How to do that?

.display-label {
        float:left;
        clear:left;
        min-width:160px;
}

.display-field {
        float:left;
        clear:right;
}

<div class="display-label">Account Id</div>
<div class="display-field">30221</div>
<div class="display-label">Full Name</div>
<div class="display-field">Tomas</div>

Upvotes: 6

Views: 3434

Answers (3)

immayankmodi
immayankmodi

Reputation: 8580

I think you need this.

.display-label {
        float:left;
        clear:left;
        min-width:30%;
        background: red;
}

.display-field {
        float:left;
        clear:right;
        background: yellow;
        min-width:70%;
}

see live demo

Adjust min-width as per your need.

Hope it will helps you. Thanks !!

Upvotes: 0

James South
James South

Reputation: 10635

overflow:hidden; is your friend here.

   .display-label {
        float:left;         
        clear:left;         
        min-width:160px;
    }  
    .display-field {        
        overflow:hidden;
        background:#ccc;    
    }

jsfiddle example here

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Remove float and clear from .display-field. Now the .display-field div starts from the left side of the browser so you need to add the desired colors to the divs to manipulate the output.

.display-label {
        float:left;
        clear:left;
        min-width:160px; 
        background:white
}

.display-field {
    background:red
}​

DEMO

Upvotes: 4

Related Questions