I'm working on a Ecommerce website which consists of a landing page, product search page and a details page designs. I got struck with the header alignment design. So, I tried to refer a lot of websites where there are different types of headers as in the following screenshots where they use headers with both fluid containers and normal containers. And there is also a different combination on page content containers with respect to header containers.

What is the best practice and there is any specific reason behind the header and content alignment? should different kind of webpages like a landing page, blog and other pages should have different kind of headers and content alignments?

The following screenshots were taken from 1600x900 resolution screen monitor.

Fluid header and Fluid content

enter image description here


Fluid header and normal content

enter image description here


Normal header and Normal content

enter image description here


Normal header and Fluid content

enter image description here


1 Answer 1


This is partially contextual and partially style related.

Some content cannot cope with fluid layouts (e.g. content where pictures are extremely closely related to text, relies on 'tiles', or some other fixed-grid requirement) while some content is better suited to fluid layouts where the content can flow and re-flow (e.g. photo lists, text-rich content, etc).

Looking at all of the content you need to be able to display in your pages should give you a strong idea of which type of page layout you need to consider.

As far as the header goes, there are sometimes similar requirements (i.e. some content will need a fixed layout and some will need a fluid layout) but you should also be relying on your design skills to tell you what to do here - Does your brand communicate values that would show better with a fluid header or a fixed header? Which works better with the page content?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.