Can someone advise me if the layout below is achievable?

I would like the content, navigation and footer all to be centered. I'm not sure how the header banner and footer banner would react to different resolutions tho. Any help appreciated.


5 answers

Doug 1095

Yes. Wrap everything in a div and apply this or similar CSS:

div#wrapper {
  margin:0 auto;

The auto applies to the left and right margins and works to center the div. To get the background image, add background-image to the body, or another div that is a parent of the wrapper div, depending on how you want things to line up.

Answered over 9 years ago by Doug

If you have flat color and images mixed together for your header/footer, then yes.

I would take the section that you could repeat and do a repeat-x for that section, then layout the other sections that cannot repeat as normal.

Are you trying to have the site stretch with the higher and lower resolution?

Answered over 9 years ago by tahdhaze09
  • Agreed. Repeating a section as a base and then laying out the non-repeatable areas on top of the repeating section would make it scale perfectly at any resolution. Good answer. +1 Abinadi Ayerdis over 9 years ago

Looks to be a fairly standard 3 column layout... I see absolutely no reason to think it would not be achievable. Below are just a couple sites doing something similar:




Answered over 9 years ago by Dwayne Anderson

Sorry, maybe my query was misunderstood. I'm fine building the 3 column bit but the header and footer (curved) will change depending on various screen resolutions people have.

Would I need to box them off for people with higher resolutions? As seen here > (http://img684.imageshack.us/i/template02.gif/)

or is there a way to make them stretching/repeat along the top and bottom of the screen

Answered over 9 years ago by officer
  • center the background image(s) and let the sides run off the screen on smaller viewports... Dwayne Anderson over 9 years ago
  • @officer: If you want to clarify your question, edit it instead of adding an answer. If you want to respond to an answer, then add a comment, don't add another answer. Abinadi Ayerdis over 9 years ago

I don't want to box the curves up like in my 2nd image link unless I have to so I guess stretching the header and footer is a must.

Answered over 9 years ago by officer