Member Avatar for samarudge

Hi,
I have a page with four primary DIVS layed out like:

using the CSS

body{
	background-color:#CCC;
}
#container{
	width:300px;
	height:auto;
	background-color:#00F;
	padding:10px;
}
#header{
	width:300px;
	margin:5px auto;
	background-color:#0FF;
	font-size:24px;
}
#left{
	width:200px;
	height:auto;
	background-color:#90F;
	float:left;
}
#right{
	width:100px;
	height:auto;
	background-color:#CF0;
	float:right;
}
#footer{
	width:300px;
	background-color:#0F0;
	float:none;

Using the HTML

<div id="container">
<div id="header">I am a header</div>
<div id="left">Left Column</div>
<div id="right">Right Column</div>
<div id="footer">I am a footer</div>
</div>

However when I add more content to eather the left column or the right column they overlap the footer


How can I make it so that the footer and container divs expand to fit the height of whichever is the longer div?
Thanx,
Sam

Edited by samarudge because: n/a
  • 3 Contributors
  • 2 Replies
  • 114 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Cragdo

Dani AI

Generated

The overlap is the classic “floats escape the normal flow” problem: the floated left/right columns do not contribute to their parent’s height, so the footer and container sit up under them. is correct that clearing the floats fixes it, and ’s link points to good background reading.

Three practical, safe fixes (pick one):

  • Clearfix (reusable, works everywhere). Add a small clearfix rule and apply it to the parent of the floats.

    .clearfix::after {
content: "";
display: table;
clear: both;
}

  • Contain the floats via overflow on the parent. This is simplest but be aware it can add scrollbars or clip shadows if content exceeds the box.

    #container { overflow: auto; }  /* or overflow: hidden; */

  • Use modern flow-root to make the parent form a new block formatting context. Clean and explicit, but not supported in very old browsers.

    #container { display: flow-root; }

A separate gotcha in the posted CSS: fixed widths plus parent padding can cause horizontal overflow (and unexpected wrapping). Use box-sizing:border-box to make width include padding, or recalc widths so columns fit inside the container.

*, *::before, *::after { box-sizing: border-box; }

If reworking the layout, consider flexbox or grid for predictable column behavior (wrap the two columns in a single middle container and use flex for the two-column area).

Quick debugging tips: open dev tools, inspect the container’s computed height and see if it collapses to the header height; temporarily remove float to observe normal flow; try each fix and watch the computed box height change. For reference on float behavior and clearing techniques see CSS-Tricks — All About Floats and MDN’s float/display docs.

Recommended Answers

All 2 Replies

Member Avatar for Cragdo

Hi,

You need to clear the footer div of the left and right floats in the left and right columns.

#footer{
        clear:both;
	width:300px;
	background-color:#0F0;
}

The overlap happens because when you apply float to a div it removes that div from the Document flow hence the name float.

Cheers

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.