Problem with widgets

This is my forum: http://www.duelacademy.net/forum

The widgets appear down below the forums and not on the same line. How do i fix it?

This is the normal appearance: http://prntscr.com/8cv1u8

This what happens after i add the new code: http://prntscr.com/8cv2g0

The widget moves down below forums, like this: http://prntscr.com/8cv4vf

This is the code I'm trying to add:

Code:


<style>
#img_url_main_events {
  width: 794px;
}
 
  #img_url_ann_in {
  margin: -2px;
  text-align: center;
  }
</style>


<div id="img_url_main_events">
  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/O9AeCgx.png"/></a>
  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/G7cvzzA.png"/></a>
  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/U65FxSA.png"/></a>
  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/T5zf0zu.png"/></a>
    </div>



I couldn't find anything faulty with the code. It's simple HTML and CSS, I don't see why it's not working. I'm adding the code to Homepage message.

I would post the entire thing we have there, but it says message too long when i try to post it here.

The only thing that would most likely cause that is an unclosed tag or an increase of width in the widget column which cannot be handled. ( it'll move down to the next line where more room is in that case )

I'd check your tags and placement of your elements for any inconsistencies. I can't offer anymore advice since I haven't witnessed the problem on your forum, yet.

If you're willing to look into it, I can add the code to the Index and you could examine the issue?

It would help, because you can usually figure out what's going on by looking directly at the hierarchy in the DOM inspector. It's easier to tell that way if it's a width or tag issue. ^^

Aight, check the forum in a couple of minutes.

Yeah, it definitely looks like a tag issue, because the homepage message is containing the entire forum content, rather than the main container. Where are you pasting the code exactly ? I mean the top, bottom, middle ?

Top of the entire HTML, right after closing CSS tag.

I tried posting it in the middle but got similar result.

EDIT: I added a second "</div>" after the code, and it looks like that patched the wound for now. However, when I go and check the code, this is what i see:

Code:

<div id="img_url_main_events">
           <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/O9AeCgx.png" /></a>  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/G7cvzzA.png" /></a>  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/U65FxSA.png" /></a>  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/T5zf0zu.png" /></a>
</div>

What I did was I simply added another </div> after the one above. But when the page loaded, the 2nd one wasn't there, but the issue is fixed. It looked like this:

Code:


<div id="img_url_main_events">
           <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/O9AeCgx.png" /></a>  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/G7cvzzA.png" /></a>  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/U65FxSA.png" /></a>  <a id="img_url_unique" href="LINKHERE"><img id="img_url_ann_in" src="http://i.imgur.com/T5zf0zu.png" /></a>
</div></div>

This is weird. Is there a way to know whether this fix is permanent or not?


Before I hit save: http://prntscr.com/8cw7nc
After I hit save: http://prntscr.com/8cw7si
Result: http://prntscr.com/8cw6gw

That is really weird. I know for a fact that the SCEditor can be buggy and force detrimental corrections. Those corrections however, are usually caused by something erroneous. Just like posts "deleting themselves" on edit is usually caused by erroneous bbcode. I know the most common error for that would be having a block-level element inside an inline element. Such as a <span> containing a <div> tag :

Code:

<span>
  <div></div>
</span>

and the editor's failed attempt at a correction :

Code:

<span></span>
<div>
</div><span> </span>

Anyway I think the best thing to do would be to keep a back up of your code and edit in there. That's what I usually do, because the editor in the ACP always screws up my indentation, not to mention the unneeded corrections. Personally, I like to edit in Notepad++ then copy the code to the forum.

If possible though, you can try to find what's causing the editor to do that. It could be an unclosed tag, the example I mentioned, maybe even an attribute.. Unfortunately I have no definitive answer, but at least you were able to find a temporary solution for yourself.

Yea, it seems that each time i edit something on that code I must add the x-factor </div> to the end of the code otherwise the problem would occur again. I copied the code on a text document in case something happened in the future.

Thank you for your help

I'll have someone to check the code entirely and try to define what's wrong with it.