CSS position to the right side of a centered layout

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

CSS position to the right side of a centered layout

Post 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>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

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

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

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

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

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

Post 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! :)
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

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

Post 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.
Phix
Forum Newbie
Posts: 21
Joined: Tue Jan 12, 2010 11:50 pm

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

Post by Phix »

How wide did you intend the template to be?
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

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

Post by Sindarin »

about 900 - 1000 pixels
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply