Question

I have a header element with 2 elements inside – an img and p elements.

I’d like the header height to be the exact height of the image it contains so that when I remove the margin and padding it “fits”.

Rather than adjusting the height of the header element to be the same pixel height as the image, is there a way to “auto” do this?

I have tried height:auto but that just brings unexpected wonky results.

Here’s the code:

<header>
  <img src="images/logosketch.jpg" alt="companylogo" />
  <div class="search">
    <p>SEARCH HERE</p>
  </div>
</header>

header { position: relative; }
.search { bottom: 0; position: absolute; right: 0; }
.search p { margin: 0; }

Any pointers?

Answer 1

Try the following –

header { position: relative; padding: 0; margin: 0;}

header img {
    display: block;
    height: 100px;
}

With this method, making the image a block element and manually setting its height, it will cause the parent block element to adjust its size. However, if any other block elements in that header have a greater height than the img element, then it will cause the header to take on that other elements height with the exception of block elements that are position absolute.

Hope this helps.