Hello guys,
I would like to know how can I make my div’s height expand with its content?
Thanks in advance.
No this isn’t, but below is the html. Now I want to make ‘features’ div have height of its content.
<section class="features"> <div class="features-container"> <div> <img src="./pics/Settings.png" /> <span>Customization</span> <p>bla bla bla</p> </div> <div> <img src="./pics/clock.png" /> <span>Customer Service</span> <p> bla bla bla </p> </div> <div> <img src="./pics/Upload.png" /> <span>Analytics</span> <p>bla bla bla</p> </div> </div> </section>
Hmmm… normally it should take the height of its content. Can you post a screenshot? And your CSS too?
The container with the class ‘features’ is the one with thick borders I wanna situate between the div with red background color and the one with green background color.
CSS
`
.features { width: 100%; background-color: white; font-family: ‘Montserrat’, sans-serif;}
.features-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%;}
.features-container div { display: inline-block; height: 200px; width: 27.5%; text-align: center; float: left; }
.features-container div:nth-child(1) { margin-left: 6%; margin-right: 3.5% }
.features-container div:nth-child(2) { margin-right: 3.5% }
.features-container div img { display: block; margin: 0 auto; width: 50px; height: 50px; }
.features-container div span { display: block; margin-top: 30px; font-size: 19px; color: #385461; text-transform: uppercase; }
.features-container div p { margin-top: 30px; bottom: 0; font-size: 12.5px; color: #b9b9b9; }
`
Hmm… the problem might be due to the .features-container's postion: absolute. That “removes” the space for it inside the .features section, so now you can’t see it.
If I get it right you’re trying to center .features-container. Instead of using position: absolute; (and all related properties), try margin: 0 auto;.
wow, yeah eliminating this .features-container { postion: absolute } property did what I wanted. Thank you so much.