I am having serious positioning problems with our site logo at higher resolutions. I want it to float left and stay inline when strtched to a larger res but it ends up popping out of place after a certain amount of stretching.

 

Here is the CSS I am using:

 

#headerlogo { 

   float:left;
   height: 116px;
   width:400px;
   display:inline !important;
   repeat: no-repeat;
   margin-left:30px;
   margin-top:30px;

}

 

This is the HTML:

 

<div id="headerlogo">
<a href="#"><img src="/images/colortheory/misc/utflogo.png" border="0" alt="$vboptions[bbtitle]" /></a><h1>Site Name</h1></div>

 

Here is an example of it at 1024x768 pixels and at larger resultions. Can you please aid me with this as it is proving a complete NIGHTMARE! lol

 

Thank you and all help is appreciated

You have your header setup as:

<div id="header">

<div> 1 </div>

<div> 2 </div>

<div> 3 </div>

<div> 4</div>

</div>

 

Why not split it up, I believe it would work better at all resolutions and across browsers, like so...

 

<div id="div-shell">

<div id="header-top">

<div> 1 </div>

<div> 2 </div>

</div>

 

<div id="header-bottom">

<div> 3 </div>

<div> 4</div>

</div>

</div>

 

It's a little more verbose, but should work as you would expect. You will need to apply widths of course.

 

Good looking site btw.

An easier solution, at least a temp one that I can only tell works in firefox (through firebug) is to add "margin-right: 600px;" to the headerlogo id style. That will force the img to the left, and doesn't have an ill effect when the window is shrunk down. Check it in other browsers, especially ie 6.

 

It looks good on my 24 inch monitor when maximized. I still suggest trying something like I mentioned above. Maybe someone else has a better idea?

An easier solution, at least a temp one that I can only tell works in firefox (through firebug) is to add "margin-right: 600px;" to the headerlogo id style. That will force the img to the left, and doesn't have an ill effect when the window is shrunk down. Check it in other browsers, especially ie 6.

 

It looks good on my 24 inch monitor when maximized. I still suggest trying something like I mentioned above. Maybe someone else has a better idea?

 

Thank you. I might try splitting the header up into groups on a test board and see how that goes. The quick fix of margin-right: 600px; worked perfectly. Was this happening because I hasnt defined all sides of the div with margins? I had only applied margin-left/top to it.

 

Thanks again