Search code examples
cssresponsive-designfluid-layoutfixed-width

Can we have percentage width in a fixed layout webpage?


I am trying to understand fixed, fluid and responsive web page design , one of the sites that I went through is fixed or fluid, here it says "A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths." that fixed layout can have percentage width, and that is what is confusing me. Isn't giving percentage width is only for fluid layout ? Isn't it what makes fluid fluid ? Could someone please explain me ?


Solution

  • The article says "the components inside it have either percentage widths or fixed widths"

    A percentage of a fixed width is in fact fixed, because it will always have the same fixed size.

    Example:

    The container component is 1000px fixed width. Two inside components are 70% and 30% width. The first one will always be 700px, the second one will always be 300px.

    <body style="width: 1000px">
    
        <div style="width: 70%">Component #1, will always be 700px width</div>
        <div style="width: 30%">Component #2, will always be 300px width</div>
    
    </body>
    

    As written in the article: "The important thing is that the container (wrapper) element is set to not move". If you remove the fixed size of 1000px of the container element, you will lose the fixed layout.