Question

I want to create a flexible grid layout (i.e. no pixel value to be used anywhere)
Now here is my question;
For the outer container, generally I use

#container{width:1024px;margin:0 auto}

This is to center align the entire page. Now when I convert the same to a % based CSS i.e.

#container{width:100%;margin:0 auto}

In this case, the page does not center align. How do I fix this issue?

Answer 1

If I’m understanding the question correctly, you seem to be needing something to stop the container from widening infinitely, but still have it expand flexibly when the viewport is narrow. If this is the case, you can apply a max-width on it to tell it when to stop expanding:

#container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

In this case, your container will be flexible and take up all available width if the viewport is less than 1024 pixels wide, but won’t go beyond 1024 pixels (and will be center-aligned) if the window grows wider.