Limiting the scope of css clear: attribute

[Andrew]

Hi guys,

Is it possible to limit the scope of the CSS clear attribute?

What I want to do is limit a clear:left to floats inside it's div so
that it does not clear any floats outside that div.

I don't have any pages publicly available yet but I've drawn a diagram
of what I'm trying to achieve and what actually happens

http://adaptivetechnologies.com/Members/andrew.crowe/clear-scope-problem.png

Is it even possible to limit the scope of clears, or is there another
way of doing this kind of layout? I can't use absolutely positioned
divs as everything needs to be able to grow vertically without
overlapping and I can't use CSS display:table-cell because IE doesn't
support it (and I'm not going to use actual tables to do this).

Thanks
Andrew

 

[Wÿrm]

I don't have any pages publicly available yet but I've drawn a diagram
of what I'm trying to achieve and what actually happens

http://adaptivetechnologies.com/Members/andrew.crowe/clear-scope-problem.png

I think you might be trying to do whole thing with some over complex way.

If I understood correctly what you wanted,
http://www.kolumbus.fi/ace/ng/thing-v1.html should be something like that?
It's just quick test and should work on IE 6, Opera 7.54 and FF 1.02 (only
browsers I tested it in)...

 

[Lauri Raittila]

"Andrew" <[email protected]> wrote in message

[Re: Limiting the scope of css clear: attribute]

Which is impossible.

I think you might be trying to do whole thing with some over complex way.

I think you misunderstood the problem

If I understood correctly what you wanted,
http://www.kolumbus.fi/ace/ng/thing-v1.html

How does it work around the problem OP has? Anyway, as you actully
provided URL for this, which OP should have done (even if yours was bad
quality html), I did some testing, and it seems that OP can have his
layout using
img, p {float:left}
as long as there is enough text to not get 2 paragraphs on one line. As
that would actually be better on most cases for usablity, I see why not
do it.

It's just quick test and should work

Of course, as you used small image and lots of text, and images are far
way from each other.

 

[Els]

Hi guys,

Is it possible to limit the scope of the CSS clear attribute?
Depends..

What I want to do is limit a clear:left to floats inside it's div so
that it does not clear any floats outside that div.

I don't have any pages publicly available yet but I've drawn a diagram
of what I'm trying to achieve and what actually happens

http://adaptivetechnologies.com/Members/andrew.crowe/clear-scope-problem.png

Is it even possible to limit the scope of clears, or is there another
way of doing this kind of layout?

Yes, there is one way that I know of. The clear properties in the
content area won't get influenced by the left floated div if the
content area itself is also a float. Now, if you make that content
area a float, it will need a fixed width, and drop underneath the left
floated div in narrow windows, and we don't want that. So, instead,
you have your left floated div, and your content area that has a left
margin and stretches to the full browser window width. Inside that
content area, you place another div, with no padding or margin, and
give it width:100% and float:left. If you would give it a padding, IE5
(and maybe IE6 too, I forgot) will add the padding to the 100% width,
so that may not be used. For a padding, you 'll have to add margins to
whatever is inside that inner-left-floated div.

I can't use absolutely positioned
divs as everything needs to be able to grow vertically without
overlapping and I can't use CSS display:table-cell because IE doesn't
support it (and I'm not going to use actual tables to do this).

Good choice

 

[Mitja]

Is it possible to limit the scope of the CSS clear attribute?

nope

http://adaptivetechnologies.com/Members/andrew.crowe/clear-scope-problem.png

I'm still not convinced using tables for layout in such a case is such a
crime. Usability beats purism - using tables, the linearization will be
just the same.
Another, more philosophical solution: use float:right for the images. Or
maybe put the navbar to the right.

 

[Wÿrm]

I think you misunderstood the problem

Most likely

even if yours was bad quality html

Why bad? Mind explain that one. I agree that ID names were bad, and styles
were in same HTML file because I was just quickly testing this, but what
"else" were bad? Maybe you should show then that "good" html?

 

[Lauri Raittila]

Why bad? Mind explain that one. I agree that ID names were bad,

Must have been that one. Somehow I don't find the page as bad anymore...
Anyway, I think I had some problem understanding what is what...

 

[Andrew]

Well that's basically what I've already got, minus the clears in the
content area which are the cause of the problem I'm having.

If you put a "clear:left;" on the 2nd para then you'll see the problem.


Thanks
Andrew

 

[Andrew]

Hi Els,

Seems like a bit of a hack but it works nicely (as with most things in
CSS it seems )

One thing I found tho was setting width to 100% caused it to wrap under
the left hand column (even though it had no padding/margin/border), but
leaving the width declaration out didn't seem to affect its visual
appearance.

Thanks
Andrew

 

[Els]

Hi Els,

Seems like a bit of a hack but it works nicely (as with most things in
CSS it seems )

One thing I found tho was setting width to 100% caused it to wrap under
the left hand column (even though it had no padding/margin/border), but
leaving the width declaration out didn't seem to affect its visual
appearance.

Did you give the div that's around the floated content div a
margin-left?

Construction should be like this:

<div id="menu">
menu
</div>
<div id="content">
<div id="wrap-to-float">
<div class="article">
<img src="...">
<p>
dummy content
</p>
<br class="clear">
</div>
<div class="article">
<img src="...">
<p>
dummy content
</p>
<br class="clear"></div>
</div>
</div>
<br class="clearall">
</div>

With CSS like this:

#menu{
width:10em;
float:left;
}
#content{
margin-left:10em; (I think in practice this needs to be slightly wider
than the floated menu)
}
#wrap-to-float{
w\idth:100%; /* backslash to make sure IE5 doesn't */
f\loat:left; /* see it, as it interprets it wrong */
}
img{float:left;}

Without the 100% width the float will become the width of the
contents. If the content is only half a page width, that's how wide
the float will be.
Check the difference with a red border on every element by writing
*{border:1px solid red;}
at the top of your stylesheet.

This construction will work for IE6 and Firefox etc, but not in Win
IE5.
For Win IE5 you need to hide the clear properties:

..clear{c\lear:both;} /* clear property in articles not seen by IE5 */
..clearall{clear:both;} /* clear property at end of #content
to be seen by all browsers */


and use the 1% height trick: Set the height of the element that holds
the image float (div.article in the above example) to 1%, but hide
that from non IE and Mac IE:

/* Hides from IE-mac \*/
* html div.article {height: 1%;}
/* End hide from IE-mac */

The * html construction is only seen by IE (Win and Mac, so the hack
is to exclude Mac IE from it).

This way IE5 automatically stretches the element to encompass the
float.

 

[Andrew]

Did you give the div that's around the floated content div a

margin-left?

As I said, no padding/margin/border.

At any rate it's true that technically the div will only be the width
of the content, but all the styling is applied to the parent div that
does go all the way across the screen, so this doesn't seem to cause
any problems.

Thanks,
Andrew

 

[Els]

As I said, no padding/margin/border.

At any rate it's true that technically the div will only be the width
of the content, but all the styling is applied to the parent div that
does go all the way across the screen, so this doesn't seem to cause
any problems.

Not sure, but are you saying you *want* the content (parent div) to
flow below the left floated div? If not, you have to apply that
margin-left to the outer wrapper of the content. (not to the floated
inner wrapper)