Member Avatar for PhilEaton

Hi!
I am making a simple box and inner box. The outer box is white and the inner box is purple. The inner box width is static (95%, i understand this is not necessarily static, but in the context of the height you'll understand) but the height is set to auto to reflect the height of the content text. The trick I'm facing is having a margin on the bottom. It is easy to set the sides. The outer box width is set to 97%, and the inner box width is set to 95%. There is a 10% margin on the top. But since the inner box height is set to auto, the outer box ends vertically where the inner box does. Is there any way to have the height of the outer box set to auto + 10%? Or something similar? Thanks!

  • 4 Contributors
  • 4 Replies
  • 252 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by PhilEaton

Dani AI

Generated

's suggestion to use padding is the simplest, most robust CSS-only fix for this thread. Padding (or a nonzero border) forces the outer container to include the inner element's spacing, avoiding the common vertical-margin collapse that makes a child appear to sit outside its parent. That explains why the outer box stopped where the inner box did when the inner used top/bottom margins.

A minimal CSS pattern that keeps layout predictable:

.outer {
  width: 97%;
  box-sizing: border-box; /* makes padding part of the width calculation */
  padding: 10px 1%;        /* vertical padding in px, horizontal in % */
  /* or use viewport units for vertical spacing: padding: 5vh 1%; */
}

.inner {
  width: 95%;
  margin: 0 auto;
}

Notes and caveats: percent values for top/bottom padding or margin are calculated from the container's width, not its height — so padding: 10% will be 10% of the container width, which often surprises people. If the requirement really is “outer = inner height + 10% of that inner height,” CSS alone can't express “auto + 10% of auto” reliably.

For an exact “auto + 10% of the inner’s computed height” approach, use a tiny script that measures the inner box and sets the outer height (ResizeObserver is ideal for dynamic content):

const outer = document.querySelector('.outer');
const inner = outer.querySelector('.inner');

function adjustOuter() {
  const h = inner.getBoundingClientRect().height;
  outer.style.height = `${Math.round(h * 1.1)}px`; // inner + 10%
}

if ('ResizeObserver' in window) {
  new ResizeObserver(adjustOuter).observe(inner);
} else {
  window.addEventListener('resize', adjustOuter);
}
adjustOuter();

Additional tips: adding border: 1px solid transparent to the outer also prevents margin collapse; prefer min-height if growth is needed rather than a fixed height; and, as recommended, posting the actual HTML/CSS quickly reveals whether margin collapse or unit choices are the real cause.

Recommended Answers

All 4 Replies

Member Avatar for AleMonteiro

Try using padding on the outter box.

Member Avatar for <M/>

create 2 boxes using div tags... then style them :)

Member Avatar for JorgeM

Its easier to have a discussion with regard to your question if you post the code you have so far.

Member Avatar for PhilEaton

Sorry, thanks the padding worked great!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.