CSS positioning

[bluemermaid]

HELP! I am trying to figure out how to keep my logo which is in a div inside the header div from moving when the browser window is resized. I've been reading about percentages and fixed positions, and maybe just working on it too long ~ not making sense to me!!

Spanish Flowers Mexican Restaurant - About Us

My CSS code:

#logo {
position: absolute;
left: 150px;
top:0
}

and html

<div id="header"><div id="logo"><img src="images/SFlogo2.gif" alt="Spanish Flowers Mexican Restaurant" /></div><div id="animat"><img src="images/topheaderanim.gif" alt="Voted Houston's Best" /></div></div>

Thanks in advance if anyone can help me!
Blue Mermaid

[agentxi]

you can probably change the absolute to relative then adjust your left/top settings appropriately..

[bluemermaid]

Sorry, I should have said that I tried that and didn't work. Thanks for taking the time to help.

[agentxi]

that's wierd, when i did it, used the following

#logo {
 position: relative;
 left: 15px;
 top:0
}

and when i resized the browser, it always stayed 15px away from the left side of the edge.

[Jacorre]

If you're absolutely positioning the logo you need something else to be positioned relative. Based on your code it looks like the header should have position equal to relative. Take a look at my tutorial on absolute positioning for more information if needed.

[bluemermaid]

THANK YOU so much Jacorre!!! That was the missing link. I kept reading about absolute and relative positioning and was almost getting it, but that was the light bulb I needed!!

[Jacorre]

Originally Posted by bluemermaid

THANK YOU so much Jacorre!!! That was the missing link. I kept reading about absolute and relative positioning and was almost getting it, but that was the light bulb I needed!!

Glad I could help! Absolute positioning can be a little confusing at first, but with practice you understand it a lot more over time.