Menu
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>
426
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Set the text-align property to “center” for the <body> element. Set the height, border, font-size, font-weight, and color properties for the “container”. Set the float property to “left” and the height to 100% for the “left”. Also, specify the width and add the background-color property.
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
To insert blank spaces in text in HTML, type for each space to add. For example, to create five blank spaces between two words, type the entity five times between the words. You do not need to type any spaces between the entities.
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
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
