Member Avatar for nizuya

This is something I've always had a problem with but never asked about...

If I am floating two columns via div tags, one left and one right (such as navigation on the left column and main content on the right), Then I have two more things floating inside the right column (one right and one left). like so...

------------------------------------------------------------------------------------------------
|                 || --------------  (no)                                    ----------------- |
|                 || |            |                                          |               | |
|                 || |            |                                          |               | |
|                 || |            |                                          |               | |
|                 || |            |                                          |               | |
|                 || --------------                                          ----------------- |
|                 || (yes)                                                                     |
|                 ||                                                                           |
|                 ||                                                                           |
-------------------|                                                                           |
                   | (no)                                                                      |
                   -----------------------------------------------------------------------------

Then what I want to do is clear both the right and the left floats of the right column, but not the left column so that my next element ends up at the yes rather than the no.

*I will post some example code in just one second if any of this is unclear

Does anyone know how to do this!?

Thanks,
David

  • 3 Contributors
  • 6 Replies
  • 109 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by vsmash

Dani AI

Generated

Short version: the clearing rule looks at floats that precede an element in the document flow and that live in the same block formatting context (BFC). That means an element inside the right column can end up clearing the outer left column if the parent does not form its own BFC. Browser differences you saw (old IE vs Firefox) are usually down to legacy "hasLayout" behavior in old IE. was right that the id/class typo is orthogonal to the problem, and was onto something when pointing out source order — but the reliable fix is to contain the inner floats so clears only affect floats inside the right column.

Two practical fixes:

  • Create a BFC on the right column (simple, minimal). Setting overflow:auto or overflow:hidden on the right-column container makes it contain its child floats so any clear inside will operate only against those children.

  • Use a modern clearfix on the right column. Example clearfix (works in current browsers; add zoom:1 for IE6/7 if you must support them):

.rightCol::after {
  content: "";
  display: table;
  clear: both;
}
.rightCol { /* for very old IE */
  zoom: 1;
}

Notes and alternatives: overflow:auto may introduce scrollbars if internal content exceeds the box; overflow:hidden will clip overflow. Reordering columns in the HTML can sometimes avoid the interaction (but changes source order/semantics). In modern layouts, using Flexbox or Grid removes the need for float hacks entirely.

Further reading: MDN on the clear property and block formatting contexts (clear, Block formatting context) and a good clearfix pattern explanation at CSS-Tricks (clearfix).

Recommended Answers

All 6 Replies

Member Avatar for nizuya

CSS:

div.main {
	width: 800px;
	margin: 0 auto 0 auto;
}
div.leftCol {
	width: 200px;
	float: left
}
div.rightCol {
	width: 600px;
	float: right;
}
div.leftElem {
	width: 100px;
	float: left;
}
div.rightElem {
	width: 100px;
	float: right;
}

HTML:

<div id="main">
	<div id="leftCol"></div>
	<div id="rightCol">
		<div id="rightElem"></div>
		<div id="leftElem"></div>
		<div style="clear:???">Yes</div>
	</div>
</div>

When I don't clear I end up right next to the left floating element, but when I do clear both the text does not start until after the column floating left.

Member Avatar for nizuya

bump

Member Avatar for nizuya

bump

Member Avatar for ko ko

You are wrong with id and class. Your div used 'id', not 'class'. So CSS should be:

#main {
}

id and class are not the same. id start with '#', class start with '.'

Member Avatar for nizuya

I realize classes and ids are not the same. using "." rather than "#" was just a mistake in my example. The problem exists even when I use the correct syntax.
The issue is browser specific, for example ie will only clear the right and left inside the right column whereas firefox will clear below the left column.

Member Avatar for vsmash

Praps it is because your right col is coded before your left col?

I'm not the authority here but my experience has taught me:
1. if you float left with a div, then the next div doesn't have to be float:right, but if it is the clear has to be both.
2. the containing div is helpful if it has position:relative
3. clear:both or clear:left/right should only be relative to the div it is enclosed in.
so, you would probably need:

<div id="main">
	<div id="leftCol"></div>
	<div id="rightCol">
		<div id="leftElem"></div>
		<div id="rightElem"></div>
		<div style="clear:both">Yes</div>
	</div>
</div>
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.