Member Avatar for arosemena

im having a layout like this

<body>
<div id="ExternalFrame"><!-- 1 -->
<div id="InnerFrame"><!-- 2 -->
<div id="TopFrame"><!-- 3 -->
<div id="LogoFrame"></div>
</div><!--3 topFrame -->
<div id="TopFrameIn" class="right"><!-- 4 -->
<span class="txt white" style="margin-right:10px;">Welcome Admin</span>
</div><!--4 TopFrameIn-->
<div id="MainContainer">
<div id="SecondTop"></div>
<div id="MainContent" class="fleft"></div>
<div id="sideMenu" class="fright"></div>
<div id="Foot"></div>
</div>
</div><!--1 InnerFrame -->
</div><!--2 ExternalFrame -->
</body>

with the css looking like this

#ExternalFrame{width:100%;}
.white{
	color:#FFF;
}
.right{
	text-align:right;
}
.fright{
	float:right;
}
.fleft{
	float:left;
}
.txt{
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
}
#SecondTop{
	width:800px;
	height:150px;
	background-color:#FC0;
}
#Foot{
	width:800px;
	height:300px;
	background-color:#FC0;
}
#LogoFrame{
	background:url(Img/Logo400px.png);
	background-repeat:no-repeat;
	width:800px;
	height:80px;
}
#TopFrame{
	width:800px;
	height:80px;
	background:url(tiles/TopTile.png);
	background-repeat:repeat-x;
}
#TopFrameIn{
	width:800px;
	height:15px;
	background:url(tiles/TopTile2.png);
	background-repeat:repeat-x;
}
#InnerFrame{
	width:800px;
	background-color:#CCC;
	margin-left:auto;
	margin-right:auto;
}
#MainContainer{
	width:800px;
	clear:both;
	display:block;
	padding:0;
	margin:auto;
}
#MainContent{
	width:600px;
	height:400px;
	background-color:#900;
}
#sideMenu{
	width:200px;
	height:400px;
	background-color:#03C;
}

the problem is that the #Foot DIV doesnt display and it should do

  • 3 Contributors
  • 5 Replies
  • 4K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by arosemena

Dani AI

Generated

You ran into a classic float issue. Because your main columns are floated, they are taken out of normal document flow. The next non-floated block (your footer) can overlap or appear to vanish unless it is moved below those floats with clear. That is why adding clear: both; on #Foot fixed it. See how floats exit normal flow and why clear pushes following blocks beneath earlier floats. (developer.mozilla.org)

Two robust alternatives that avoid putting clear on the footer:

  • Contain the floats in their parent by creating a new block formatting context (BFC). The modern, explicit way is display: flow-root;. Older-but-common patterns include overflow: auto; or a small “clearfix” utility. Creating a BFC makes the parent wrap its floated children, so the footer naturally sits beneath the parent without manual clearing. Note that overflow-based BFCs can introduce scrollbars or clip effects, so prefer flow-root when you can. (developer.mozilla.org)
/* Preferred: contain floats so the footer does not need to clear */
#MainContainer { display: flow-root; }

/* If supporting very old browsers, a simple clearfix helper */
.clearfix::after { content: ""; display: table; clear: both; }
/* Then add class="clearfix" to the float container in your HTML */

Troubleshooting tips you can apply quickly:

  • Temporarily add outlines to key boxes to see stacking and containment:
    #MainContainer, #MainContent, #sideMenu, #Foot { outline: 1px dashed red; }
  • If you stick with overflow: auto; for containment, re-check for unwanted scrollbars or clipped shadows and switch to flow-root if you spot any. (developer.mozilla.org)

Credit to for suspecting overlap and to for confirming that clear: both; resolves it; the underlying cause is the floats, and containing them (or clearing them) is the durable fix.

Recommended Answers

All 5 Replies

Member Avatar for Xlphos

The div has nothing in it.

Try putting a border in CSS around the foot div to see if it displays.

Member Avatar for arosemena

either of the other 3 divs have something on it so dont think thats the problem cause they have width and height and a bgcolor so they should display

Member Avatar for Xlphos

either of the other 3 divs have something on it so dont think thats the problem cause they have width and height and a bgcolor so they should display

Maybe the other Divs are hiding it. Can you put in your CSS a margin for your footer Div to see if it is positioned behind the others and where it is located.

Member Avatar for MidiMagic

Browsers do not display tag pairs with nothing between the tags unless they are needed to render something else.

Put something between the tags. The usual filler for an empty pair of tags is either <br /> or &nbsp; .

Member Avatar for arosemena

putting
clear:both;
on the Foot div made the trick

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.