Topic: HowTo Clear -- Img Align="left" (Page 1 of 1)

Is there a way to "clear" an image align left? Much like CSS float rules where you follow up a float left with an element set to "clear:all"?

Karl

Best way is to simply not use 'align="left"' at all. That's what CSS is for.


BTW - clear:both; is what you should use, there is no value of "all".

[This message has been edited by DL-44 (edited 03-30-2004).]

So then... either give the image an ID and assign it a float value of left or wrap it in a div tag? What is recommended?
.. then of course the next element is "clear:both"..

Karl

floating would give you what you're after I tihnk, you may do well to add several classes to your style sheet like:

floatl {

	float : left;

	}

floatr {

	float : right;

	}

clearb {

	clear : both;

	}

then you can call one or the other or multiples. Combine like so:

class="floatl clearb"

I'm sure DL would say same as that's the way the GN doos it with their tutorials



[This message has been edited by JKMabry (edited 03-31-2004).]

quote:

---

either give the image an ID and assign it a float value of left or wrap it in a div tag?

---

Nope - no need for either. This is a huge misconception that I find a great number of people have.

Why give it an ID?
Why wrap it in a div?

Just make generic classes, like JK listed, and you can call multiple classes for any element, like hs stated, in case you need to apply other styles as well.

In this thread - http://www.ozoneasylum.com/Forum8/HTML/000774.html I listed a few of the 'generic' classes that I usually use for such things.

Thanks for the tips!
I'm trying to figure out how you can float and clear at the same time.... but I guess that works!

I like the idea of incorporating some of these class rules into a base style sheet.

Karl

That's an interesting technique of having some general purpose classes for float left, float right, etc.

However, wouldn't this be akin to using style='float:left' (etc.) on each element?

What I mean is: Aren't classes better when they represent a higher-level abstraction (and are not presentation-specific)?

Using the technique described, if I wanted an alternate style sheet that had elements with class='floatl' floated right instead, I'd either have to change the HTML or end up with the following rather confusing CSS rule:

floatl {float: right}

The benefit of using a class instead of an inline stlye is that you can have multiple classes defined for any element. You can also make use of these generic classes instead of retyping a great number of redundant inline styles.

So yes, with a major design change, you may have to change the HTML. But we're talking about generic classes, which would be used to fill in where specific classes for an element are not plausible. We're also talking about removing a class name, and not altering the actual structure of the mark up.

Simply put, there are cases where there's no "purist" way to do what needs to be done in a layout situation. I think it is possible to go too far with the concept of "seperation of style/content".



[This message has been edited by DL-44 (edited 04-08-2004).]

quote:

---

then you can call one or the other or multiples. Combine like so:

code:

class="floatl clearb"

---

Doh, I didn't know this was valid. I've unnecessarily duplicated a lot of my class information into different classes.
Yet again, thanks for a vaulable snippet.

I was ecstatic when I first discovered you could call multiple classes - it's an essential feature of efficient CSS, IMO.

Ecstatic?

You need to get out more.

:::11oh1:::

Actually, I didn't know you could call multiple classes... that's pretty cool.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | Keeper of the Juicy Bits

Does it make you ecstatic?

:::11oh1:::