Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Fixed Width Design
Most users at the beginning of the internet's existence were desktop computer users. Nowadays, you can access the internet on your laptop, phone, tablet, automobile, etc. People anticipate that the website will appear nice across all platforms. Before responsive web design, web developers and designers tried with a variety of various methods. One of them was fixed-width design.
As the name suggests "The width of your content is fixed" implies, the material's width will always be the same regardless of the size of your screen. Let's dive into the article to learn more about the fixed width design.
What is Fixed Width Design?
Fixed layouts are designs that begin with a particular size specified by the web designer. No matter how big the browser window is that is displaying the page, they stay at that width. In most circumstances, fixed-width layouts give a designer more direct control over how the website will appear. They are frequently favored by designers with a print background because they let the designer make minor changes to the layout and have them maintain consistency across browsers and computers.
Syntax
Following is the basic syntax for creating a fixed-width layout using CSS
body {
width: fixed-value; /* e.g., 960px, 1200px */
margin: 0 auto; /* Centers the layout */
}
Here, fixed-value is typically specified in pixels (px) and remains constant regardless of screen size. The margin: 0 auto centers the fixed-width container horizontally.
Basic Fixed Width Layout
Example
Let's look at the following example, where we are going to design a webpage with a fixed width
<!DOCTYPE html>
<html>
<head>
<title>Fixed Width Layout</title>
<style>
body {
width: 800px;
margin: 0 auto;
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
h1 {
text-align: center;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
article {
background-color: white;
padding: 20px;
margin-top: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<article>
<p>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</article>
</body>
</html>
When we run the above code, it will generate an output with the content displayed in a fixed 800px width container, centered on the page
TutorialsPoint (centered, blue underline) The journey commenced with a single (white box, fixed 800px width, tutorial on HTML in 2006 and elated centered on page with margins by the response it generated... on both sides)
Advantages of Fixed Width Design
Let's look into some of the advantages of using fixed-width design
-
Consistent Layout Regardless of screen size, the page's essential structure stays the same. Companies that want to project a unified corporate identity to all visitors may consider this a top priority.
-
Controlled Line Length When the page is viewed on a wide monitor, fixed-width pages and columns provide you better control over line lengths by preventing them from being excessively long.
-
Predictable Design On smaller displays, text won't be interrupted by fixed width components like images because its width is equal to that of the full page.
-
Print-friendly Fixed layouts work well when the design needs to closely match printed materials.
Disadvantages of Fixed Width Design
Now, let's look into some of the drawbacks of the fixed-width design
-
Horizontal Scrolling Fixed-width designs require horizontal scrolling in browser windows that are smaller than the fixed width. The majority of people dislike horizontal scrolling.
-
Wasted Space On larger monitors, they leave huge stretches of white space, which leaves a lot of empty area and necessitates more vertical scrolling than necessary.
-
Poor Accessibility Fixed-width layouts struggle to adapt to changes in font size made by the user. They may be okay for modest increases in font size, but for significant increases, the layout may be affected.
-
Mobile Unfriendly These designs perform poorly on mobile devices and tablets with varying screen sizes.
Fixed Width vs Responsive Design
Example
In the following example, we are going to compare the differences between fixed-width and responsive designs
<!DOCTYPE html>
<html>
<head>
<title>Fixed vs Responsive Width</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.fixed-width {
background-color: #e8f5e8;
width: 600px;
height: 80px;
margin: 20px auto;
text-align: center;
line-height: 80px;
color: #2e7d2e;
border: 2px solid #4caf50;
border-radius: 5px;
}
.responsive-width {
background-color: #fff3e0;
width: 80%;
max-width: 600px;
height: 80px;
margin: 20px auto;
text-align: center;
line-height: 80px;
color: #e65100;
border: 2px solid #ff9800;
border-radius: 5px;
}
.demo-text {
text-align: center;
color: #333;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="demo-text">Resize your browser window to see the difference</div>
<div class="fixed-width">Fixed Width (600px)</div>
<div class="responsive-width">Responsive Width (80% with max 600px)</div>
</body>
</html>
On running the above code, an output window will display two boxes one with fixed width and another with responsive width. When you resize the browser window, you will notice that the fixed-width box stays the same size while the responsive box adjusts accordingly
Resize your browser window to see the difference Fixed Width (600px) (green box, always 600px) Responsive Width (80% with max 600px) (orange box, adapts to window size)
Common Fixed Width Values
Following are some commonly used fixed-width values in web design
| Width | Target Resolution | Use Case |
|---|---|---|
| 960px | 1024x768 screens | Classic desktop layouts |
| 980px | 1024x768 screens | Slightly wider desktop layouts |
| 1200px | 1280x1024 and larger | Wide desktop layouts |
| 800px | Older/smaller screens | Conservative approach |
Example Multiple Fixed Width Containers
Following example shows how to create a layout with multiple fixed-width sections
<!DOCTYPE html>
<html>
<head>
<title>Multi-section Fixed Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f5f5f5;
}
.container {
width: 960px;
margin: 0 auto;
background-color: white;
}
.header {
height: 80px;
background-color: #34495e;
color: white;
text-align: center;
line-height: 80px;
}
.content {
width: 700px;
float: left;
padding: 20px;
background-color: #ecf0f1;
min-height: 300px;
}
.sidebar {
width: 200px;
float: right;
padding: 20px;
background-color: #bdc3c7;
min-height: 300px;
}
.footer {
clear: both;
height: 60px;
background-color: #2c3e50;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header (960px total width)</div>
<div class="content">
<h2>Main Content (700px)</h2>
<p>This is the main content area with fixed width. It will always maintain its 700px width regardless of screen size.</p>
</div>
<div class="sidebar">
<h3>Sidebar (200px)</h3>
<p>This sidebar has a fixed width of 200px.</p>
</div>
<div class="footer">Footer (960px total width)</div>
</div>
</body>
</html>
This creates a traditional fixed-width layout with header, content area, sidebar, and footer, all contained within a 960px wrapper
Header (960px total width) (dark blue bar, centered) Main Content (700px) | Sidebar (light gray main area with This is the main content... | (200px) darker gray sidebar on right) Footer (960px total width)
397 Views
