CODEWITHSUNDEEP
htmlcss
Arngue
Arngue

Reputation: 235

Why parent div isn't getting expected height

I've implemented a template with static heights. I've changed it's content height to fit to child heights, but parent <main> and parent <section> aren't getting the autocalculated height. Why? I'm getting insane with this issue.

HTML:

<section class="seccion-productos">
  <div id="sidebar">...</div>
  <div id="grid-selector">...</div>
  <div id="grid">...</div>
</section>
</main>
<footer>...</footer>

html code

CSS:

#sidebar{
    float: none;
    height: auto;
    width: 22%;
    padding: 1% 0 0 2%;
}
.seccion-productos { 
    position: relative;
    width: 100%;
}
#grid-selector {
    width: 78%;
    position: absolute;
    top: 0;
    left: 22%;
    right: 0;
    display: flex;
    vertical-align: middle;
}
#grid {
    width: 78%;
    height: auto;
    top: 90px;
    left: 22%;
}

Undesired Result, parent content doesn't fit child content Result enter image description here

I am just asking what things can make this happen and what should I do to solve it. Or if i'm missing something. Or where I have to look.

You also can see full code in here: https://randal-es.000webhostapp.com/php/paginas/productos.php

Upvotes: 0

Views: 104

Answers (2)

Mihail Minkov
Mihail Minkov

Reputation: 2633

@Arngue, as @Johannes says, if you put a child element with absolute positioning it won't affect the parent element even if the parent element has position relative. The only thing that the parent's relative position affects is the origin of coordinates for absolute positioning. You need to change the position definition for #grid-selector otherwise it will always break your layout.

Upvotes: 2

Johannes
Johannes

Reputation: 67738

The position: absolute; of the #grid-selector element takes it out of the size calculation context for the parent. Change that to relative

Upvotes: 1

Related Questions