1

The <div> container shrinks to, well, "zero" after positioning my logo. Could you please check what's the problem? I'd like it to be centered in the #logo <div>. I thought making parent <div> relative and children absolute should keep logo in the <div>.

Html

 <body>
    <div class="wrapper">
        <header>
            <div id="logo">
                <img src="./img/logo.png">
            </div>
        </header>
    </div>
</body>

CSS 

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding:0;
    margin:0;
    background-color: #DCB894;
}

.wrapper{
    margin-right: auto;
    margin-left: auto;

    max-width: 960px;

    padding-right: 10px;
    padding-left: 10px;
    border-style: solid;
    border-color: blue;
    border-width: 2px;
}

header {
    margin-top: 10px;
    background-color: #BCD34C;
}

#logo{
    border-style: solid;
    border-color: magenta;
    border-width: 2px;
    position: relative;
    height: auto;
}


#logo img {
    width: 150px;
    height: auto;
    position: absolute;
    margin: auto;
    border-style: solid;
    border-color: red;
    border-width: 2px;
}
neptunereach
  • 105
  • 2
  • 7
  • Does it shrink or position itself off screen? – treyBake Apr 06 '18 at 17:46
  • 1
    Since the wrapper dosent have height, and the only element is image with position absolute, it actually dosent contain nothing or "shrink" like you say. – A. Meshu Apr 06 '18 at 17:57
  • Why does it need to be positioned absolutely? Won't simply removing the `position` from the img solve everything? Just change the `display` to `inline-block` and then the margins will work. – Mr Lister Apr 06 '18 at 18:24
  • 1
    Ref: *"I thought making parent `
    ` relative and children absolute should keep logo in the `
    `"*. Please point to any documentation specifying this would or should happen. One of the most common pitfalls in CSS is using properties without knowing (or researching) what each of them does. With the best possible intentions and hoping I do not sound rude, I have to remind that you are supposed to read the basic documentation and standards on the technology you are using and only ask here when what happens conflicts with what you found in the docs.
     – tao Apr 06 '18 at 18:25
  • I've read here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/ – neptunereach Apr 06 '18 at 18:48

2 Answers2

3

Yes it should to behave something like that because position: absolute and position: fixed dose not take place from it's parent or container. When you use these two css properties they go outside regular document follow. That's why parent treat inside have no content and height not auto increase until set you height by explicitly by css properties like height: 100px (for example) or min-height: 100px (for example).

According your current structure either you set the minimum height based logo.

header {
    min-height: 100px; // 100px here logo size assumed
}

Or keep the position of logo image relative:

#logo img {
   position: relative;
}
Hanif
  • 3,739
  • 1
  • 12
  • 18
0

I would avoid position absolute, if you wrap your image within a div you can centre your image. 

    body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding:0;
    margin:0;
    background-color: #DCB894;
}

.wrapper{
    margin-right: auto;
    margin-left: auto;

    max-width: 960px;

    padding-right: 10px;
    padding-left: 10px;
    border-style: solid;
    border-color: blue;
    border-width: 2px;
}

header {
    margin-top: 10px;
    background-color: #BCD34C;
}

#logo{
    border-style: solid;
    border-color: magenta;
    border-width: 2px;
    position: relative;
    height: auto;
    max-width: 220px;
    overflow: hidden;
}

#logo figure {
  width:52%;
  margin: 0 auto;
}

#logo img {
    width: 100%;
    position:relative;
    border-style: solid;
    border-color: red;
    border-width: 2px;
    overflow: hidden
}
<body>
    <div class="wrapper">
        <header>
            <div id="logo">
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Pepsilogo.png">
               </figure>
            </div>
        </header>
    </div>
</body>

The img will take up 100% of the total space, given to it by the figure.

You can change the width of the figure and then the image will respond, keeping it centered.

David
  • 801
  • 8
  • 19