Help with CSS and layouts

jamesmn09 · 04-02-2009, 04:58 AM

Hi

Im currently learning CSS and i need some help with the layout of it, when i change the resolution it expands or shrinks.

I was wondering can someone point me in the right direction about keeping my work the same in all resolutions.

Thanks in advance

James

**carsey** · 04-02-2009, 03:19 PM

Use % instead of px in your width: tag.

width:100%

That will make the page fit 100% of the users screen.

Obvilously you will need to do that for everything on your page, such as the header and any other elements.

craigs85 · 04-06-2009, 09:42 AM

Hi,

From what I read, the problem seems to be that he is using % instead of px in the width tags?

If you want to keep your work the same in all resolutions, then you want to be using a px value instead of % don't you?

I may have mis-understood, in which case, sorry.
Regards,

Craig

EDIT: Actually, I think i did mis-read! Sorry!

**carsey** · 04-08-2009, 08:07 PM

the % resolution will make your site appear exactly the same if the resolution is the smallest possible or the largest possible.

maretard · 04-08-2009, 08:25 PM

Allow me to clarify for craigs85:

The OP wants his site to remain proportionally the same in length and width regardless of the resolution or size of the user's window. The only way to accomplish this is with % units instead of px units, as px units are fixed, whereas % units take into account the width of the browser window.

Another alternative (one that sites such as Gamespot frequently use) is centering fixed-width content so that the "smallest" popular resolution (800x600) can view it, and the largest resolutions get some nice background real estate on the left and right of the content.

It depends on what type of content you have on your page. If you'll have lots of Flash and other unscalable/unstretchable stuff, you're better off with the center fixed-width approach; if you just have text and scalable media, then the % method should work fine.

If you're using CSS, I'm assuming you won't have too much Flash or unscalable stuff; in that case, % should do you just fine.

Be sure to do your math right though, I can't count how many times I've seen pages with various parts whose widths add up to 110%. :P

04-02-2009, 04:58 AM	#1 (permalink)
jamesmn09 Registered User Join Date: Mar 2009 Location: Liverpool Posts: 7 OS: XP SP2	Help with CSS and layouts Hi Im currently learning CSS and i need some help with the layout of it, when i change the resolution it expands or shrinks. I was wondering can someone point me in the right direction about keeping my work the same in all resolutions. Thanks in advance James

04-02-2009, 03:19 PM	#2 (permalink)
carsey Moderator, TSF Articles Join Date: Aug 2006 Location: Hunwick, Co. Durham England Posts: 10,678 OS: XP Pro SP3 My System	Re: Help with CSS and layouts Use % instead of px in your width: tag. width:100% That will make the page fit 100% of the users screen. Obvilously you will need to do that for everything on your page, such as the header and any other elements. __________________ Submit New Articles Here

04-06-2009, 09:42 AM	#3 (permalink)
craigs85 Registered User Join Date: Sep 2007 Location: Derbyshire, UK Posts: 85 OS: Windows Vista	Re: Help with CSS and layouts Hi, From what I read, the problem seems to be that he is using % instead of px in the width tags? If you want to keep your work the same in all resolutions, then you want to be using a px value instead of % don't you? I may have mis-understood, in which case, sorry. Regards, Craig EDIT: Actually, I think i did mis-read! Sorry! Last edited by craigs85; 04-06-2009 at 09:43 AM.

04-08-2009, 08:07 PM	#4 (permalink)
carsey Moderator, TSF Articles Join Date: Aug 2006 Location: Hunwick, Co. Durham England Posts: 10,678 OS: XP Pro SP3 My System	Re: Help with CSS and layouts the % resolution will make your site appear exactly the same if the resolution is the smallest possible or the largest possible. __________________ Submit New Articles Here

04-08-2009, 08:25 PM	#5 (permalink)
maretard Registered User Join Date: Dec 2007 Location: Georgia Posts: 74 OS: Windows XP Home Edition, SP3 My System	Re: Help with CSS and layouts Allow me to clarify for craigs85: The OP wants his site to remain proportionally the same in length and width regardless of the resolution or size of the user's window. The only way to accomplish this is with % units instead of px units, as px units are fixed, whereas % units take into account the width of the browser window. Another alternative (one that sites such as Gamespot frequently use) is centering fixed-width content so that the "smallest" popular resolution (800x600) can view it, and the largest resolutions get some nice background real estate on the left and right of the content. It depends on what type of content you have on your page. If you'll have lots of Flash and other unscalable/unstretchable stuff, you're better off with the center fixed-width approach; if you just have text and scalable media, then the % method should work fine. If you're using CSS, I'm assuming you won't have too much Flash or unscalable stuff; in that case, % should do you just fine. Be sure to do your math right though, I can't count how many times I've seen pages with various parts whose widths add up to 110%. :P __________________ I'm ridin' dirty. Oh baby, I'm yellow and nerdy.