MyBB Community Forums

I am trying to position my logo to the left and a banner to the right using CSS. Please check www.qnhl.com.

I am using the following code:
CSS:
----
img.banner {
text-align:right;
position:relative;
left: 28%;
}

img.logo{
text-align:left;
}

HTML:
------
<a href="$settings[bburl]/index.php"><img src="$theme[logo]" alt="$settings[bbname]" border="0" class="logo" /></a>
<a href="http://qnhl.com/showthread.php?tid=556&pid=1470#pid1470"><img alt="Free NHL T-Shirts and Hats" border="0" src="http://www.qnhl.com/images/banners/tshirt-hat.jpg" width="450" height="162" class="banner" /></a>


But the problem is that the left:28% is specific to the resolution of the screen, so a smaller resolution will put half of the banner outside the screen...how can I make the CSS code resolutin independent? I tried different CSS combinations, but none really worked!

Thanks,
GSA

You should try float: left; in the css for the logo and float: right; in the css for the header.

It doesn't work.

GSA

Well first off I guess I'll say hi since I'm the new guy here. I kind of found this searching through the web for some extra forum software that I would recommend to people and myBB turned up pretty good. I currently run a gaming website and a design website with a small staff that has recently begun porting some forum templates from IPB & SMF to myBB since this seems like a promising project that seems to be pretty well run from first glance.

Now to your problem. Unfortunately you cannot mix and match text-align and floats. So first off, get the text aligns out of there. Next as far as floating goes you cannot float two layers within a layer just by doing float:left and float:right. It will cause some problems and not give you the output you desire.

Your code should look like this:

*HTML*

<div id="title_row">
<div class="banner"><a href="http://qnhl.com/showthread.php?tid=556&pid=1470#pid1470"><img alt="Free NHL T-Shirts and Hats" border="0" src="http://www.qnhl.com/images/banners/tshirt-hat.jpg" width="450" height="162" /></a></div>
<a href="$settings[bburl]/index.php"><img src="$theme[logo]" alt="$settings[bbname]" border="0" /></a></div>

*CSS*

#title_row { width: 100%; }
.banner { float:right; }

Just to explain this real quick. Your HTML code should be surrounded by a layer. This is an arbitrary layer which only defines the space you want these images to occupy. So the width will need to be 100% otherwise it will only stretch to the max space needed which might not be the full page width.

Next the class banner within the title_row class is only needed to float the image to the right. By default all items on web pages are aligned to the left so you don't need to define it in 99% of cases. The float:right will allow that other image to occupy all space to the right of your banner as long as it does not overlap your image on the left.

thanks SankEyez! I fixed it using tables, but I will use your advice soon.

GSA