Skip to content
Related Articles

Related Articles

Fixed Width Design

Improve Article
Save Article
  • Last Updated : 26 Sep, 2022
Improve Article
Save Article

In the early days of the world wide web, the majority of people out there were using desktop computers. These days the web is available on laptops, phones, tablets, cars, etc. People expect that the website will look good on every device. Responsive design makes this possible. 

Responsive web design isn’t the first approach to building websites. Web developers and designers tried many other techniques before responsive web design. Among various other methods, one of them was fixed-width design.  

As the name implies “The width of your content is fixed” means, that no matter what your screen size is, the width of the content is going to be the same all the time. In the early age of the internet and the world wide web, most monitors had screen dimensions of (640 * 480) pixels, these were CRT monitors (Cathode Ray Tube monitors). So web designers and developers thought that it was a safer choice for them to design their website according to that dimensions only. 

As time goes, there were screens of sizes: 800*600 pixels, so the developers started feeling that designing their website for a fixed width of 800 pixels is a good choice for them. But again, the screen sizes change to 1024*768 pixels. Now, the developers had to design their website according to that screen size as well. It felt like a never-ending race among web designers, developers and hardware manufacturers.

Fixed Width Design means, when you specify a fixed width for your layout, that your layout will only look good at that specific width.

Syntax:

width: 1015px;

Note: The above number “1015” is just an example, you can use any value in place of that.

Approach:  Fixed-width is generally used when you don’t want the width of your content to change according to the changing width of the screen. To do so, you have to declare a width property in your CSS code with some value in it. Whether it was 640, 800, or 1080 pixels, choosing one specific width to design for is called fixed-width design. 

The CSS code of the below example is showing you a fixed-width design. You can easily see that we already defined the width of the body section as 640px which means no matter what the size of the screen will be, the body will always going to be 640px wide. And therefore restricting the web from being responsive.

Example 1: Below you will see an example of fixed width layout, where the units that we are using in the code are in pixels, which means the width is fixed and it will look good only in that specified width. Remember that it’s a fixed-width design, which means it will look good only on certain screen width and it’s not responsive. In responsive layout, we use rem/em units instead of px.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <style>
        body {
            width: 640px;
            font-family: sans-serif;
            line-height: 1.5;
            padding: 0 16px;
        }
  
        h1 {
            margin-bottom: 0;
        }
    </style>
    <title>GeeksforGeeks</title>
</head>
  
<body>
    <header>
        <div style="text-align: center">
            <h1 style="color: green">
                GeeksforGeeks
            </h1>
        </div>
    </header>
  
    <main>
        <h1>Fixed-width design</h1>
        <article>
            <p>
                As the name implies "The width of your content
                is fixed" means, that no matter whatever your
                screen size is, the width of the content is going
                to be the same all the time. In the early age of
                the internet and the world wide web, most monitors
                had screen dimensions of (640 * 480) pixels, these
                were CRT monitors (Cathode Ray Tube monitors). So web
                designers and developers thought that it was a safer
                choice for them to design their website according
                to that dimensions only.
            </p>
            <p>
                As time goes, there were screens of sizes: 800*600
                pixels, so the developers started feeling that 
                designing their website for a fixed width of 800 
                pixels is a good choice for them. But again, the 
                screen sizes change to 1024*768 pixels. Now, the 
                developers had to design their website according 
                to that screen size as well. It felt like a
                never-ending race among web designers, developers 
                and hardware manufacturers. Fixed Width Design 
                means, when you specify a fixed width for your 
                layout, that your layout will only look good at 
                that specific width.
            </p>
        </article>
    </main>
</body>
  
</html>


Output:

 

You can easily see in the above gif, that it is not adjusting the content as the screen width is changing because we have already declared a fixed width of certain pixels in our CSS code. This is called fixed-width layout. In the fixed-width layout, the content is not adjusted according to the changing screen width. That’s why it only looks good on one specific screen width. No matter what the screen size is, the content will go to cover only a certain portion of the screen.

Example 2: The below example will show you the comparison between fixed-width design and responsive design.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks</title>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }
  
        header {
            text-align: center;
            color: green;
        }
  
        .container {
            text-align: center;
        }
  
        .fixed-width {
            background-color: black;
            width: 800px;
            height: 40px;
            margin: 225px auto;
        }
  
        .responsive-width {
            background-color: red;
            width: 52%;
            height: 40px;
            margin: 22px auto;
        }
    </style>
</head>
  
<body>
    <header>
        <h1>GeeksforGeeks</h1>
    </header>
    <main>
        <div class="container">
            <div class="fixed-width"></div>
            <div class="responsive-width"></div>
        </div>
    </main>
</body>
  
</html>


Output:

 

As you can see, in the GIF above, the black bar has a set size regardless of the pixel count on the screen, but the red bar changes size in response to the pixel count.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!