When a child element is positioned absolutely, the div will not automatically adjust its height accordingly

Question

When a child element is positioned absolutely, the div will not automatically adjust its height accordingly

I am trying to create an effect where my image overhangs outside of its containing div. I have positioned the image absolute and the parent container relative, but now the parent div does not resize to contain the image. How can I achieve this?

Here is the HTML code:

      <div class=".twelve.columns" id="header">
        <div id="logoWrapper">
                <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
                <div class="clr"></div>
        </div>      
      </div>

And here is the CSS code:

.ssImg{
    width:100%;
}
.clr{
    clear:both;
}
#header{
     margin-top:0;
     background:#000;    
     position:relative;
     width:100%;
     border:1pt solid pink; 
}

You can view a sample on JSFiddle

html css

Answer 1

Answer №1

Absolutely positioned elements are removed from the document flow, meaning their dimensions cannot impact their parent elements. If maintaining children as position: absolute is necessary, you can achieve this effect with JavaScript. Learn more at this link.

To achieve the desired effect without relying on JavaScript, consider using negative values for top or bottom positioning. Check out the updated JSFiddle for a practical example.

.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
 margin-top:0;
 background:#000; 
 position:relative;a
 width:100%;
 border:1pt solid pink;
}

#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
        bottom: -40px; /* this is new */
}

<div class="twelve columns" id="header">
    <div id="logoWrapper">
            <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
            <div class="clr"></div>
    </div>      
</div>

Answer 2

Absolutely positioned elements are removed from the document flow, meaning their dimensions cannot impact their parent elements. If maintaining children as position: absolute is necessary, you can achieve this effect with JavaScript. Learn more at this link.

To achieve the desired effect without relying on JavaScript, consider using negative values for top or bottom positioning. Check out the updated JSFiddle for a practical example.

.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
 margin-top:0;
 background:#000; 
 position:relative;a
 width:100%;
 border:1pt solid pink;
}

#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
        bottom: -40px; /* this is new */
}

<div class="twelve columns" id="header">
    <div id="logoWrapper">
            <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
            <div class="clr"></div>
    </div>      
</div>

Answer 3

Answer №2

What do you think of this solution?

body, html {
  height: 100%;
  padding: 20px;
}

.ssImage {
   width: 100%;
}

#mainHeader {
  background-color: #000;
  position: relative;
  width: 100%;
  height: 100%; /* Adjust the height as needed */
  border: 1pt solid pink;
}

#logoContainer {
  width: 15%;
  min-width: 120px;
  position: absolute;
  top: -15px;
  left: -25px;
}

<div id="mainHeader">
  <div id="logoContainer">
    <img src="https://example.com/logo.png" class="ssImage">
  </div>
</div>

Answer 4

What do you think of this solution?

body, html {
  height: 100%;
  padding: 20px;
}

.ssImage {
   width: 100%;
}

#mainHeader {
  background-color: #000;
  position: relative;
  width: 100%;
  height: 100%; /* Adjust the height as needed */
  border: 1pt solid pink;
}

#logoContainer {
  width: 15%;
  min-width: 120px;
  position: absolute;
  top: -15px;
  left: -25px;
}

<div id="mainHeader">
  <div id="logoContainer">
    <img src="https://example.com/logo.png" class="ssImage">
  </div>
</div>

Answer 5

Answer №3

Let's start with this:

If you're looking to assign multiple classes to an element, go with something like

<div class="twelve columns">

instead of

<div class=".twelve.columns">

Next, in reference to your inquiry:

Absolutely positioned elements are taken out of the document flow and consequently do not affect the parent element's dimensions.

To address this issue, be sure to explicitly specify the height and width for the element.

Answer 6

Let's start with this:

If you're looking to assign multiple classes to an element, go with something like

<div class="twelve columns">

instead of

<div class=".twelve.columns">

Next, in reference to your inquiry:

Absolutely positioned elements are taken out of the document flow and consequently do not affect the parent element's dimensions.

To address this issue, be sure to explicitly specify the height and width for the element.

When a child element is positioned absolutely, the div will not automatically adjust its height accordingly

Answer №1

Answer №2

Answer №3

Similar questions

I am having trouble with the functionality of my bootstrap navbar toggler

Require this form to be centered flawlessly

How to disable a select list in HTML using vue.js when it is checked

The functionality of display flex is not functioning as expected outside of the CodePen

chaotic telerik editor arrangement

Position a modal in the vertical center with scroll functionality for handling extensive content

Error: Unable to find a matching route in Django

Align the button to the right side inside a div container

My CSS seems to be causing issues and generating errors in the console. What could be the problem?

The rendering of HTML DOM is being obstructed on iPhone devices running iOS 13

Using HtmlUnit to select and navigate to a particular link based on its reference and name

Avoid automatically scrolling to the top of the page when a link is clicked

Why is my JQuery display none not functioning properly?

Exploring the semantic-ui dropdown menu feature in Chrome

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

Display two examples from the material-ui documentation

Any tips for modifying my jQuery script so that a div smoothly tracks my cursor's movement?

PHP is unable to properly process JSON data that contains HTML tags

Why won't hover over function properly in separate divs for two items?

Change wiki text into HTML using Python for showcasing on a webpage