How to auto adjust the height of one element as per amount of text in the textbox
How to auto adjust the height of one element as per amount of text in the textbox
I am trying to achieve a simple layout with a float element and some text for some article. The left-hand side should display the item number in a float box and right side the item description.
I want to set the height of float element as per the amount of text in the description. How to achieve that?
The HTML code is like below.
<div style="border: 1px solid #ccc; border-right: 0;
display: -ms-flexbox;">
<div style="float: left; background-color: #f73738; color: yellow;
font-size: 20px; min-width: 48px; text-align: center; padding: 40px 0;
height : ?">1</div>
<h2 style="font-weight: normal; font-size: 20px; padding: 20px 0
20px 12px; margin: 0; text-align: center;"> Some demo text to be entered
here. The item should be described in detail.</h2>
</div>
I want something so that the height of float can be self-adjusted with the amount of text. So basically I am looking for the value of height. The amount of text will keep changing, so will be the height of it. How to make sure the item number has the same height as item description.
Currently, I get something like this.
enter image description here
Can you help me to changes the CSS ( style elements) so that it can auto adjust with the text?
Thanks in advance.
1 Answer
1
Your CSS is incomplete. You're only applying the IE attribute for flexbox. Change display: -ms-flexbox; to display: flex. Is this what you wanted?
display: -ms-flexbox;
display: flex
<div style="border: 1px solid #ccc; border-right: 0; display: flex">
<div style="float: left; background-color: #f73738; color: yellow; font-size: 20px; min-width: 48px; text-align: center; padding: 40px 0;">1</div>
<h2 style="font-weight: normal; font-size: 20px; padding: 20px 0 20px 12px; margin: 0; text-align: center;"> Some demo text to be entered here. The item should be described in detail.</h2>
</div>
@user1535460 I'm sorry, I don't understand. Currently, like you can see if you press "Run code snippet" in my answer, the element with the float attribute has the same height as the container element with the border attribute. Can you please add an image which shows the result you want?
– coreuter
Sep 15 '18 at 7:04
Hi, thank you so much for your help. your solution worked for me.
– user1535460
Sep 16 '18 at 3:13
@user1535460 I'm glad my solution helped. If your question is answered, please close your question by clicking the checkmark to the left of the answer that helped you most.
– coreuter
Sep 16 '18 at 5:41
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I am looking for the height of the float element so that it can auto set to the height of the border element.
– user1535460
Sep 15 '18 at 1:37