Menu
My real project isn't using embedded styling or background colours. Those have been added for troubleshooting purposes only.
Starting with the code below, everything is fine, except the second text input feels a bit short. All the other text inputs stretch to fill the browser window. I don't want it to do that, but I would like it just to fill the section I coloured in red. So stretch all the way to the right, but not all the way to the left.
<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
<div style="background:red;"><input type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>Given that I would like the text input to fill 100% of the parent div (i.e. area in red), my first instinct is to write style="width:100%;" but this does not have the desired result. See below.
<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
<div style="background:red;"><input style="width:100%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>How do I make the text input fill the area shown in red?
251
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).
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.
Use flex like below.
Add display: flex on parent div, and flex: 1 0 auto; on the second input's parent div and width 100% on the second input.
<label for="phoneNumber">Home Phone</label>
<div style="background: :blue; display: flex;">
<div style="background:yellow;;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
<div style="background:red;flex: 1 0 auto;">
<input type="tel" name="phone" id="phoneNumber" autocomplete="tel" style=" width: 100%;"></div>
</div>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