What's the approved version of <br style="clear:all"; /> ?
 

I cannot for the life of me figure out what the "approved" way is of clearing one element from another. I have images that I need to sit on top of one another and to the right of the page, but I cannot get one to clear the other - I just end up with the images stacked left-to-right!

I've tried inserting all sorts of divs, paragraphs, and breaks using clear attributes both naturally and by way of style elements; either way the WP editor cheerfully removes them from my fscking post as though they were never there. (I did not have this problem in WP 2.3, which I am beginning to strongly regret updating to 2.7.)

Can anybody please tell me what I'm supposed to be doing in order to control element float?

example of the problem: http://new.coastalscience.com/?p=71&preview=true

There is no clear:all, it should be clear:both

Try clear:right and if that does not help additionally add display:block

Yeah, fat-finger error, sorry.

clear:both works temporarily - sometimes, if you put exactly the right amount of whitespace around it - but any time you ever click back and forth between the Visual and HTML tabs on the post entry/edit screen, WP removes the entire tag. It does that for <br>, <p>, AND <div> tags.

I did not have this problem with the WP 2.3 that Ubuntu defaulted to; but the bug in Atahualpa with the calendar and archive widgets cropped up, and I decided that upgrading WP would be a better option than hacking Atahualpa. To be honest, I'm regretting it...

Back to the original point, do you know of a clean way to break on images that WP won't immediately get rid of when switching back and forth between the Visual and HTML tabs?

(Incidentally, please don't let my grouchy tone put you off - Atahualpa is a really great theme and I'm enjoying it a lot. I'm just really frustrated with WP's "smarter than you are" editor trying to "help" so much!)

The images should have got a class by WP, such as

<img class="wp-image-103...."

You could try with a CSS Insert

img.wp-image-103 {
clear:right;
...
...
}

Flynn, sorry, but I'm a CSS noob - I haven't really been up-to-speed with HTML since the before-CSS days.

Can you give me a little more detailed info about how and where exactly to insert the CSS?

Thanks again.

OK, it feels like I'm having to reinvent a wheel... but I found a workable solution.

I added the following to style.css:

And then what I can do is go to the HTML view, then add "clearright" to the "align" attribute of the WP [caption] tag for the image after I've inserted it, like this:

And THAT works, and the never-to-be-sufficiently-damned "smart" editor doesn't go back in and "helpfully" edit it out. Thank you for the help!

Well, crap, I spoke too soon... it WORKS, but the editor still removes it from my code if I go to the Visual view.

I am really, really HATING the WP 2.7 editor...

OK, now I feel dumb: I didn't realize that the fake-tags <code> and </code> would make the editor leave added HTML and/or CSS alone without "helping". My problems are solved now.

I did learn some helpful tricks along the way though, so thank you for your help! Sorry to noob up your forum. =)

CSS Inserts is a theme option at Atahualpa Thee Options -> HTML/CSS Inserts -> CSS Inserts

Put the CSS into that textarea instead of editing style.css

And you should not need to add something to the image's thml by going into HTML mode in the WP editor. Each image should already have an unique class, through which you should be able to address that image, by adding some properties for that specific class of the image

Example:

In the source code of the browser-rendered page (by clicking "View Source" or similar in your browser) all images should appear as something like:

<img class="size-full wp-image-117 alignnone" title="sampleimg2" src="http://webnx.bytesforall.com/wp-content/uploads/2008/07/sampleimg2.jpg" alt="" width="500" height="333" />

size-full and alignnone are generic classes that all images of this type get. wp-image-117 however is a unique class. So you'd use that to apply a CSS style for that individual image.

Add this as CSS Insert (through the theme options as described above)
I also added !important just to be sure

Thanks Flynn; I understood what you were saying about editing the individual image class attributes, that just strikes me as a really poor solution to my problem - it's better for me to have generic solutions I can apply in the post editor than to have to keep running back and forth to the theme editor for every individual image.

Again, the real solution I needed was just "use the fake-tags <code> and </code> to wrap your tags"; given that I can just use divs or brs to clear the elements as normal and the editor leaves them alone.