Element's position in document and AddThis

[knystrom18]

Pages in question:http://martinsfails.com/example/complaints.phphttp://martinsfails.com/example/form_submitComplaint.phphttp://martinsfails.com/example/form_contact.phphttp://martinsfails.com/example/contactMartins.phpOn the "Complaints", "Submit Complaint" and "Contact" pages, everything is fine except for the top most comment's details (poster, date, time). This particular complaint's details are shifted a bit to the right as if an invisible image or something is pushing them over.On the "Contact Martin's" page, the same thing is happening with much more disastrous results. :)I've tried positioning the "addthis" div for the two broken pages separately from all the other working pages, but to no avail.I'll provide CSS/XHTML if needed.Any help would be appreciated.Thanks,- K

[jeffman]

I believe it is because your addThis div has a float:left rule that passes its force onto the next element that actually has visible content, which is the first <li> element in the complaint div. So the <li> is floating. It's position is offset from where it should be by EXACTLY the width defined for your addThis div. The next complaint doesn't float because floating has been canceled by then.Since you are positioning addThis with coordinates, does it really need to float at all? You could try removing the float rule.(Actually, if it must float, why not float it right? That's where it goes.)If it must float, try a quick and dirty trick. Immediately after the addThis div, add an empty div with this rule -- clear:both . That should cancel the float also. I mean something like this:

<div style="clear:both"></div>

(Yes, it's ugly code.)

[knystrom18]

I'll give those a try. Thanks Dierdre.

[knystrom18]

clear: both works wonderfully. Thank you. A question for you or anyone though:Why does an element with a property of float pass on it's float to the very next element? And in the exact width of the floating element? Is that some sort of error in whatever makes XHTML work?

[jeffman]

That is what float is supposed to do. What's wrong here is that, in my mind, anyway, the "pasing on" should not work outside an element's containing element. If my memory is correct, this behavior varies from browser to browser. What's most important as a developer is to recognize what it is when you see it so you don't lose hours trying to solve it.

[dsonesuk]

Why add <div style="clear:both"></div> when can add clear:both to the the next div container, less ugly this way.div#formContent {padding:15px 0 0;clear:both;}div#content {padding-bottom:20px;clear:both;}

[jeffman]

That will certainly work. It is my own taste to put the correction on an element that is adjacent to the floating element, not on an element that is outside the floating element's container. Even if it does add a non-semantic element, the result seems to me more intuitive and portable. YMMV.On the other hand, I keep thinking there's a rule you can add to the floating element that keeps this from happening. I just can't remember what it is! :)Ingolme should know.

[Ingolme]

If the floating element is inside a container, elements outside the container won't be affected by the float if the container has overflow: auto or overflow: hidden. In older versions of Internet Explorer and Opera, the container must also have a specified width for this to work.the clear property is good if the element is at the same level as the floated element.

[jeffman]

Dude, do you have an alarm that goes off when your name shows up? I didn't even know you were lurking. :)Yes, I was thinking of the overflow hack. Adding one of those to the addThis div should do it, and then the empty div will not be required.Please excuse the brain fart.

[knystrom18]

Excellent answers. I'm so glad there are ways to combat this, and they're actually easy to. Thanks guys. I'll be using this a lot.