Clearing nested floats (or another way around....)

[theEclipse]

This may or may not be any help at all, but its a demonstration of where I am failing:

http://robertcarpenter.net/bench/nested-floats.html

I am working with a CSS 3 column layout:

Some *bare bones* psuedo html/css 
<div id=left style=float:left width:100>...</div>
<div id=right style=float:right width:100>...</div>
<div id=centen style=width:auto margin:0 100;>... ... ...</div>

In my center column I have a series of paragraphs, each with an associated picture. I have set the pictures to float left, so that the paragraphs will flow around the pictures.

Some of my paragraphs are *short*....and sometimes more than one paragraph is associated with a picture.

So I add <hr style=clear:both> to the mix. Now my problem is that the <hr>s are clearing the nav menus outside the content div too. (see example if necessary. I removed the float:left from the image placeholders, but the effect is the same).

How am I doing this wrong? What should I be doing?

Thanks



Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[BillyRayPreachersSon]

I think it's because your borders are pushing the width of the elements outside the width of their containers.

Try using a background colour instead of a border to highlight your elements...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

It's also possible I've completely mis-understood your problem, as you talk about 'nav' and 'menus' yet your page shows no nav and no menus, nor any element with a name that implies they might be navs or menus, so it's pure guess-work as to what your problem actually is.

Perhaps you can describe it in terms of specific elements in specific columns, or give some meaning to the elements on your page to enable us to have even a vague chance of helping you out?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Vragabond]

I have not yet found a solid solution around this problem. However, if your page is 1000px wide and your right and left columns are 100px, then you can calculate the width of the center column and float that one too. This way you would avoid the issues with the clearing floats.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[g0ste]

hr{
  width:100%;
  clear:left;
}

________________________________
Top 10 reasons to procrastinate:
1)

 

[Vragabond]

g0ste, your solution solves the issue only superficially. This is because example has a short left column and clearing only left works. If left was longer, then the problem would remain. Width has no impact on the render at all.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[g0ste]

it solves the issue posted. we don't know how long the left column will be. all evidence points to it being 100px in height.

however, to avoid this issue all together, it would be alot easier to something like:

in the style:

.foo{
	width:98%;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:2px solid black;
	border-left:2px solid yellow;
	border-right:2px solid yellow;
	float:left;
}

then wrap each of the paragraphs into the the class foo:

<div class="foo">
  <div id="inner-left" class="inner floater"></div>
  <p>Lorem ipsum dolor sit amet,</p>
  <p>consectetur adipiscing elit. Donec eget ipsum nisl</p>
  <p>eget laoreet sapien. Suspendisse potenti. Aliquam accumsan placerat leo vitae sagittis.</p>
</div>

and remove all references to the horizontal rule

________________________________
Top 10 reasons to procrastinate:
1)

 

[g0ste]

i also forgot to mention; this will allow the left column to be as lonnnnng as you like.

we just remove the offending [tt]<hr />[/tt] code all together, and replace it with an "imitation" horizontal rule with [tt]border-bottom[/tt].

________________________________
Top 10 reasons to procrastinate:
1)