How to fit the height of a div to its contents? Other answers did not resolve it

Question

I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.

So the problem is:

The width of the bar should be the width of the page. Its height should be the size of the logo (plus some padding added around the logo image).

Or is there a way to make the bar as big as its content plus the padding added to the content?

I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.

I have also seen this and this.

My code is as follows:

<!DOCTYPE html>

<html>

    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .div {
                position: absolute;
                height: auto; //**** When changed to a percent value, it displays
                width: 100%;
                top: 0px;
                left: 0px;
                float: left;
                background: #000029;
            }
            .logo {
                position: fixed;
                top: 5px;
                left: 12px;
                bottom: 4px;
            }
        </style>
    </head>

    <body>
        <div class="div">

             <img src="http://********Header.svg" alt="Logo" class="logo" >

        </div>
    </body>

</html>

It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.

So what I want is that the height of the bar should fit to its content i.e. the logo image.

EDIT:-

enter image description here

Why are you positioning the div absolutely? Absolute positioning and floating don't mix. Also, fixed positioning is relative to the viewport. And I hope you're not using that comment syntax in your actual page anywhere. Finally, why wouldn't you share the link to the actual image? You're asking for help so that makes no sense. — j08691, Jul 17 '14 at 13:47
Is there a reason for using position absolute and fixed attributes? — Anurag, Jul 17 '14 at 13:47
you have to remove `position: fixed;` for `logo` or change to `relative` — bansi, Jul 17 '14 at 13:48
@Anurag For absolute positioning, yes! I saw the CSS for the div with id `abs` from [here](http://jsfiddle.net/XgErJ/4/) — Solace, Jul 17 '14 at 15:23
Whoever is down-voting, please bother telling me the reason as well, otherwise your down-votes do no good! — Solace, Jul 17 '14 at 15:43
@j08691 Because for this I was just using a logo from the internet for practice, I do not have an original logo yet. I think I am not authorized to use that logo, so I commented it. Yes I asked for help but it was not related to the logo I used. Hope I redeemed myself. — Solace, Jul 17 '14 at 15:48

score 3 · Answer 1 · answered Jul 17 '14 at 13:50

3

Remove virtually all of your CSS rules and just use something as basic as:

.div {
    background: #000029;
}
.logo {
    vertical-align:top;
}

jsFiddle example

answered Jul 17 '14 at 13:50

j08691

204,283
31
260
272

you forgot width:100% for the .div – Anurag Jul 17 '14 at 13:53
@Anurag - Divs are 100% width by default. They're block elements. – j08691 Jul 17 '14 at 13:53
I still don't trust IE enough to leave them as default. I feel safer writing it. :) – Anurag Jul 17 '14 at 13:55
No it does not produce the desired result. It produces a padding kinda thing around the div. I am posting a screenshot. – Solace Jul 17 '14 at 14:18

Alien · Accepted Answer · 2014-07-17T14:05:41.150

1

change you css code like below:

.div {
      position: fixed;  
      width: 100%;
      top: 0px;
      left: 0px;
      background: #000029;
      padding:5px;
      }

       .logo {               
        }

see the demo here ---->http://jsfiddle.net/4A7Q9/1/

edited Jul 17 '14 at 14:05

answered Jul 17 '14 at 13:50

Alien

3,658
1
16
33

score 1 · Answer 3 · answered Jul 17 '14 at 13:52

The style can be something along these lines:

<style>
            .div {

                width: 100%;
                background: #000029;
                padding-left:10px;
                padding-right:10px;
                padding-top:10px;
                padding-bottom:10px;
            }
            .logo {

            }
        </style>

How to fit the height of a div to its contents? Other answers did not resolve it

3 Answers3