I'm currently struggling with an issue - I can't seem to pinpoint the problem. The header of a website template is functioning perfectly in 1280*800 resolution, but it's breaking on larger monitors (1900*1440). The header consists of three divs as outlined below:
<div id="header">
<!--#LOGO#-->
<div id="logo">
<a href="<?php echo SITE_URL;?>"><img src="<?php echo SITE_IMG?>shop-logo.png" alt="<?php echo SITE_NAME;?>"></a>
</div>
<!--#HEADER NAVIGATION#-->
<div id="welcomeimg">
<img src="<?php echo SITE_IMG?>shop-willkommen.png" alt="">
</div>
</div> <!-- end header-->
Below are the CSS styles used in the templates:
#header {padding-bottom:0px; margin-bottom:0; background-color:#CCCCCC;background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;}
#logo
{
left:105px;
#left:-350px;
position:relative;
width:300px;
}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
}
The "logo" and "welconeimg" divs are breaking and appearing misaligned within the header(wraper).
If anyone could offer a solution, I would greatly appreciate it.
Thank you in advance.