Page 1 of 1

CSS position to the right side of a centered layout

Posted: Wed Nov 25, 2009 8:34 am
by Sindarin
I am creating my first CSS-based site and I am having a hell of a problem with positioning an rss logo to the right side the layout.
The design is centered and I need a rss logo beside it and stay there no matter the viewport.

the css I am using is this,

Code: Select all

#rss-logo
{
z-index:3;
float:left;
position:relative;
 
left:1050px !important;
top: 0px!important;
}
I've tried placing the image to different places including before, after and inside the wrapper, but it doesn't work.
Also tried relative, absolute, float and fixed. Neither of them work, it still pushes all other elements down.

Image

<rant> CSS is a good concept with bad implementation. Why have that stupid box positioning when you could have a flexy layers model? </rant>

Re: CSS position to the right side of a centered layout

Posted: Wed Nov 25, 2009 10:06 am
by pickle
I'm assuming the RSS logo is supposed to be cut off, and that the clouds are supposed to be right under the top row of links. This is the style I'd use:

Code: Select all

#rss-logo{
  position:absolute;
  float:right;
  top:10px;
  right:10px;
}
#rss-logo{ position:fixed; }
I used 2 declarations because IE doesn't support position:fixed, so we default to absolute - which is pretty much the same, it just doesn't follow the viewport.

That's about all I can suggest without seeing the markup.

Re: CSS position to the right side of a centered layout

Posted: Thu Nov 26, 2009 4:06 am
by Sindarin
The cloud thing is actually an adbanner

This is what it's supposed to look like, (this is from my PSD)
Image

the page layout is this,
Image

I don't think posting the whole code will help rather than confuse. Imagine you have a centered div wrapper and wanted to put some element beside that div left or right, how would you do that?

Re: CSS position to the right side of a centered layout

Posted: Thu Nov 26, 2009 9:46 am
by pickle
Try placing the logo inside the centered div, give the centered div relative positioning, give the logo absolute positioning, and set the left property of the logo to the width of the centered div.

Re: CSS position to the right side of a centered layout

Posted: Fri Nov 27, 2009 2:34 pm
by daedalus__
i think you could set it to the right and give it a negative value to achieve the same effect. maybe there is a reason the centered div might change in width? a scroll bar?

but pickle is right thats about the easiest way to accomplish your goal.

Re: CSS position to the right side of a centered layout

Posted: Tue Jan 12, 2010 8:03 am
by Sindarin
Try placing the logo inside the centered div, give the centered div relative positioning, give the logo absolute positioning, and set the left property of the logo to the width of the centered div.
Thanks, this worked! :)

Re: CSS position to the right side of a centered layout

Posted: Sun Jan 31, 2010 12:48 pm
by Sindarin
Another issue I have though it's that people with lower resolutions will have the horizontal scrollbar visible, because the logo is outside of the viewport. It doesn't look very nice.

Re: CSS position to the right side of a centered layout

Posted: Mon Feb 01, 2010 2:26 pm
by Phix
How wide did you intend the template to be?

Re: CSS position to the right side of a centered layout

Posted: Thu Feb 18, 2010 4:12 pm
by Sindarin
about 900 - 1000 pixels

Re: CSS position to the right side of a centered layout

Posted: Thu Feb 18, 2010 5:49 pm
by pickle
Hmm - you could wrap the entire page in a div, set to 100% width and no specified height. Set the overflow to hidden.

However, if someone came along with an 800 x 600 screen, that would cut it off.