What’s The Best Way to Make A Website Fit on 1024×768 Resolution?

[Anonymous]

Which is the best way to make my website fit on 1024×768 screen resolution without effecting the layout and positioning as much?

[Paulie_D]

We need to see a link.

Unless we know what is involved how can we possibly reply?

The simplest answer is DON’T. Don’t aim for a specific resolution, aim for viewport sizes using percentages and device-widths.

[Anonymous]

@Paulie_D Here’s the link of the website [LINK](http://reallycoolstuff.net/JV/ “”)

[Paulie_D]

To start with there seems to be ‘center’ elements…what the heck are they, I’m not aware of an HTML element of ‘center’?

[Anonymous]

The center tag is used to position everything in the middle of the screen. It exists. so whats the best way of making it fit for the resolution?

[darrylm]

Deprecated

http://www.w3schools.com/tags/tag_center.asp

[Paulie_D]

OK…Frankly the structure leaves a lot to be desired but I guess the real question is …

>Why is 1024px important?

If that is the maximum width that you want your centered content to be then it’s relatively simple. You set the wrapper element to have:

width:100%;
max-width:1024px;

What you WILL have to do is adjust all of the fixed pixel widths of any sub-elements to percentages of 1024px.

That’s the quick and dirty answer. I’m not going to get into responsive images / iframes etc.

You also might want to think about moving the headercontent div actually into the header div.

[Andy Howells]

@jarolin – Didn’t we already do this thread once?

https://css-tricks.com/forums/discussion/comment/90121

Regarding centering, don’t use the center tag it’s deprecated.

Instead use: margin: 0 auto;

[Anonymous]

Okay, i made a few changes according to your suggestions. I got rid of all the “center” tags and replaced them for 0 auto. I also moved the headercontent inside the header div,( not sure why i did that). But i’m sure there are still a few more problems with my code, and letting me know would be great.

[Anonymous]

@ChrisP When you say ” use percentage based width”, on what exactly do i use percentage as the width? do i use it for everything like images/CSS graphics or what?

I know iframes aren’t good. They cant be crawled by spiders and can’t use links to navigate through them on the main page. Which is why i’m not including any important content that wont be found by SEO’S. Thanks for the feedback.

[Anonymous]

@ChrisP I actually worked on a website with everything set as “%” before, and it didnt turn out so great. When the window is minimized on one side only, the website because stretched and the images distorted. I’m not sure if its worth setting everything with percentage.

[Anonymous]

@ChrisP Thanks for the help, I appreciate it. Any way you can help me out [HERE](https://css-tricks.com/forums/discussion/22137/entire-page-scrolls-down-when-close-button-is-clicked#Item_6 “”) too?

[Author]

Posts