The “fixed layout” is also referred to as a static layout and it is measured in “pixels”. This type of layout makes the width of the element fixed. Moreover, the fixed layout is programmed in a way that no matter the screen size or resolution, the element’s width will not change. It is beneficial for users who want to present consistent corporate images to all visitors.

This blog will demonstrate the procedure of creating a fixed-width layout with CSS.

How to Create Fixed-Width Layout Using CSS?

For the purpose of creating a fixed-width layout, firstly, inside the body element of the HTML, add a div element with a class name “fixed-width”. Then, add <h1> and <p> elements to add some content.

HTML

The markup structure has been completed and can be seen in the below-given image:

Now, let’s apply CSS styling properties to the above HTML elements.

Style All Elements

As we know, the fixed-width layouts use exact pixel width, so, the width property will be set in “pixels”. It defines that the element’s width will remain the same as in every screen size.

Style fixed-width div

The “.fixed-width” is referring to the div class fixed-width. The following properties are applied to the div fixed-width:

• “background-color” specifies the color of the element’s background.
• “margin” specifies the space around the element.
• “max-width” sets the maximum width of the element.
• “height” property sets the element’s height.

The output of the mentioned code is displayed below:

It can be observed that the width of the div fixed-width is fixed. It does not change according to the screen sizes.

That’s how the fixed-width layout is created in CSS.

Conclusion

The fixed-width layouts set the width of the element fixed. They remain the same in every screen size. If the browser window’s width is less than the layout’s width, a horizontal scroll bar will appear, and the element’s width will not change. To make the layout fixed, the width of the element must be specified in “pixels”. With the help of a practical example, this blog has demonstrated how to create a fixed-width layout in CSS.