MyBB Community Forums

Maybe this should be in themes and templates, but I'm sure it's a simple code change.
On my new theme, I have ads and social icons in the header in its own little box. Problem is, in browsers other than Chrome, the social icons form a new line under the ads, instead of staying on one line.
I'm trying to make it stay there, however I haven't been able to figure it out.
Here's my code:

<div class="navigation"><div align=left valign=top>{myadvertisements[zone_1]}</div><div align=right valign=top><a href="https://www.facebook.com/pages/Enigma-Computer-Community/151400624902427" target="_blank"><img src="{$theme['imgdir']}/social/facebook.png" width="30" height="30" /></a>&nbsp;<a href="{$mybb->settings['bburl']}/twitter.php"><img src="{$theme['imgdir']}/social/twitter.png" width="30" height="30" /></a>&nbsp;<a href="http://enigmachs.com/misc.php?action=syndication"><img src="{$theme['imgdir']}/social/rss.png" width="30" height="30" /></a></div></div><br />

I've tried valign, it hasn't worked
I'd appreciate any help I can get on this. My site is at www.enigmachs.com

Try this;

<div class="navigation"><div style="float: left" valign="top">{myadvertisements[zone_1]}</div><div style="float: right" valign="top"><a href="https://www.facebook.com/pages/Enigma-Computer-Community/151400624902427" target="_blank"><img src="{$theme['imgdir']}/social/facebook.png" width="30" height="30" /></a>&nbsp;<a href="{$mybb->settings['bburl']}/twitter.php"><img src="{$theme['imgdir']}/social/twitter.png" width="30" height="30" /></a>&nbsp;<a href="http://enigmachs.com/misc.php?action=syndication"><img src="{$theme['imgdir']}/social/rss.png" width="30" height="30" /></a></div></div><br />

If the problem persist try changing all divs to span

That works, however now I have a problem with the ads and buttons hanging out of the box. http://enigmachs.com

Try this instead;

<div class="navigation"><span style="float: left">{myadvertisements[zone_1]}</span><span style="float: right"><a href="https://www.facebook.com/pages/Enigma-Computer-Community/151400624902427" target="_blank"><img src="{$theme['imgdir']}/social/facebook.png" width="30" height="30" /></a>&nbsp;<a href="{$mybb->settings['bburl']}/twitter.php"><img src="{$theme['imgdir']}/social/twitter.png" width="30" height="30" /></a>&nbsp;<a href="http://enigmachs.com/misc.php?action=syndication"><img src="{$theme['imgdir']}/social/rss.png" width="30" height="30" /></a></span></div><br />

Add a clear and it should correct that . Because floats are weird sometimes.

Or, try what he posted above while I was typing...

Still isn't working, Yaldaram
Alex, would you mind elaborating?

Sure. The simplest way would be to create a class like

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}

Probably has more than you need but should do the trick(just copied and pasted from my favorite framework but really only clear:both; should be needed.

Then just add

<div class="clear"></div>

at the end of the code you have.

(2011-05-23, 06:27 PM)Alex Smith Wrote: [ -> ]Sure. The simplest way would be to create a class like

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}

Probably has more than you need but should do the trick(just copied and pasted from my favorite framework but really only clear:both; should be needed.

Then just add

<div class="clear"></div>

at the end of the code you have.

Thanks, that worked