I've always been wondering how to develop a layout so that it works the same in any browser window on every pc. It'd be really kind if anyone could explain the main steps that you have to take to achieve this.

Example 1: background pictures on the side of the main content area that adapt to the size of the other elements

Example 2: graphical design that fills the screen at any resolution

3 answers


Well, what you see in most pages is that the content is in the middle, about 700-900px width. height can be variable, all you need is a tileable background so that whenever the viewport gets to large, the background image wont fuck up.

The second page you p[ut up for example is a bad example, he just hase each page about 2200px width. Only horizontal and he uses jquery to slide to the next page. I have two 22" monitors, and when i stretch my browser i can see two of his pages in the browser. Not the best solution but it works, untill most people get 40" monitors ;)

Answered about 9 years ago by Menno Geelen

Making fluid layouts (I think you're referring to them judging by your examples) are not so easy to explain in a few words/tricks. I'd advice you to start reading about it in e.g. article or just Googling for fluid layouts.

Answered about 9 years ago by ??????? ??????

It isn't possible to make anything look exactly the same in every browser. If you want to see what those particular sites are doing, then look at their source.

Answered about 9 years ago by Nathan Duran
  • I'm not sure that "works the same", as the OP states, is necessarily the same as "exactly the same"? May be the OP needs to confirm. w3d about 9 years ago