Member Avatar for Squidge

Hi all,

I seem to have an issue with my CSS.

The page setup that has the issue is:

<footer>
<section 1></section 1>
<section 2></section 2>
<section 3></section 3>
</footer>

The sections are set to 33% width and floating left. The containing footer does not seem to expand in height:

What it looks like (very rough still)

  • 2 Contributors
  • 2 Replies
  • 197 Views
  • 8 Minutes Discussion Span
  • Latest Post Latest Post by Squidge

Dani AI

Generated

Good catch by and thanks to @AHarrisGsy — the footer was being prevented from growing by its CSS. For anyone landing here later: floated children are taken out of the normal flow, so a parent with only floated children can collapse or be constrained by explicit sizing. Three 33% columns will work, but the parent must be allowed to contain them.

Reliable ways to make the footer wrap its floated children:

/* modern, simplest */
footer { display: flow-root; }
/* classic clearfix (good cross-browser fallback) */
footer::after {
  content: "";
  display: table;
  clear: both;
}

If you prefer to avoid floats altogether, switch the footer to flexbox for equal columns and automatic height:

footer {
  display: flex;
  gap: 1%;
  align-items: flex-start;
}
footer > section {
  flex: 1;
  min-width: 0; /* prevents overflow with long content */
  box-sizing: border-box;
  padding: 0 10px;
}

Quick notes and troubleshooting tips:

  • Avoid fixed heights on containers that must grow with content. Use min-height only when needed.
  • A fast hack is overflow: auto; on the parent, but that can create scrollbars or clip shadows — use with caution.
  • Use box-sizing: border-box; globally so padding doesn’t push percentage widths over 100%.
  • In devtools, inspect the computed styles to find any height/max-height/overflow rules or absolute positioning on children that stop normal sizing.
  • If columns still wrap, check margins/padding + percentage widths (rounding can push totals over 100%).

For this layout, converting the footer to display: flow-root or display: flex will generally be the most robust and future-proof solution.

Recommended Answers

All 2 Replies

Member Avatar for Octet

The problem is the footer has a max height of 200px.

Change the following CSS:

footer {
    background-color: #666666;
    border-top: 1px solid #3E3E3E;
    box-shadow: 0 1px 4px #000000;
    font-size: 0.9em;
    height: 190px;
    margin: 15px auto;
    max-height: 200px;
    padding: 10px 10px 20px;
    width: 88%;
}

And remove the max-height: 200px;

Edited by Octet
commented: Many thanks +6
Member Avatar for Squidge

@AHarrisGsy,

So many thanks. Thought i had removed that :)

SOLVED

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.