Floats and Clears

[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

[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.

[nizuya]

bump

[nizuya]

bump

[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 '.'

[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.

[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>