How do you position something to stay when a page expands??

Fireproofgfx

Fireproofgfx

New Member
Can someone please tell me how to make the logo stay put when the page expands or shrinks? Here is what I am currently working on, which isn't much. I still have a lot to do.

I think it has something to do with the X and Y positioning but I am not sure and I have been trying different things for a while tonight. Thanks for any help you can provide me with.
 
R

redig

New Member
I may be misunderstanding your question, but if you just want the logo to stay centered with your content, I would just make your logo div the width of your content (831px in this case), center the background image, and set .logo's margin to 15px auto.

Basically the CSS would look something like this:

Code: 
.header {
  background-image: url(hd_bg.png);
  width: 100%;
  height: 151px /* The height was increased to compensate for the padding */
  margin: auto;
  padding: 1px; /* Prevents the margins from collapsing */
}

.logo {
  background: url(hd_logo.png) no-repeat center;
  width: 831px;
  height: 114px;
  margin: 15px auto;
}


This may not be the best solution, but it is what I would do.
 
Last edited:
Fireproofgfx

Fireproofgfx

New Member
Hey Redig,

Thank you, that did do the trick. I changed the Center to Left so the logo lines up to the left but it works great now. I appreciate your help!
 
You must log in or register to reply here.
Top