Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by robberbaron
robberbaron
23,869 Points

How to adapt height of a div according to its content-height

Hi !

I have a responsive site with a logo on top which is placed in two divs (half-transparent background and frame.

While I narrow the width being in the media-query for mobile devices the logo shrinks more and more which is good and wanted. Unfortunately I have trouble to adapt the height of the divs around the logo so that they shrink with it. Right now the logo shrinks and I have a whitespace below it that grows as the logo shrinks.

I found this possible solution but don't like it because it somehow is too complicated and does not seem very maintainable to me.

Is there any best practice for solving this? Some lines of jquery/javascript would be ok also some lines of css…

Any proposals / ideas?

Cheers Marc

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Wrap your image in a pair of divs then use margin: auto; width: 50%; to center the image.

<div class="box">
  <div class = "box-contents">
    <img src="image.jpg">
    </div>
  </div>

/* center image */
.box, .box-contents { 
  margin: auto;
  width: 50%;
}

.box-contents > img { 
  margin: 10% 0; /* space from edge of box-content */
  width: 100%;
}

Here's a simple demo I made you on codepen.

robberbaron
robberbaron
23,869 Points

Cool thanks - this looks promising Will try to apply it on my site

James Barnett
James Barnett
39,199 Points

Marc Wilnauer

If you are still having trouble make a reduced test case using codepen and we should be able to offer more specific advice.

Eric Murphy
Eric Murphy
407 Points
Eric Murphy
Eric Murphy
407 Points

Marc,

Are you using a front end framework?

I know bootstrap re-sizes images on the fly.

robberbaron
robberbaron
23,869 Points
robberbaron
robberbaron
23,869 Points

Hi Eric,

thanks for the fast reply! I'm using foundation…

Giovanni CELESTE
Giovanni CELESTE
20,961 Points
Giovanni CELESTE
Giovanni CELESTE
20,961 Points

I think you should check the css of the div containing your logo (or the css of the logo itself). To me it seems you have:

  1. Padding from the div containing the logo still remaining
  2. Or Margin from the logo itself (or the img css)
  3. A height property from your div containing the logo not responsive determined

Check it with chrome dev tools or firebug, I think you should be able to see if it's my guesses. Hope it can help.