CSS Layouts Without Flexbox and Grid – Classic Positioning and Visual Control

CSS Layouts Without Flexbox and Grid – Full Control with Classic Techniques

Flexbox and Grid are the modern standards for CSS layouts, but they're not the only options. Before these methods became popular, developers used classic techniques like inline-block, position, or table-cell to build complex structures. In this material, we explore how to create solid layouts without relying on Flex or Grid, learning to control spacing, alignment, and positioning with precision.

1. Structures with `inline-block` – Simplicity and Compatibility

Before Flexbox appeared, inline-block was a popular method for creating horizontal layouts. Elements naturally align next to each other, and compatibility with older browsers is excellent. However, you need to manage spacing between elements and vertical alignment.

☞ Remove the font-size: 0 line from the CSS code below to see the white space between columns! That spacing appears because inline-block elements are treated as text, and the browser interprets the space between them as regular word spacing.

🔧 Live Example

<div class="container">
  <div class="box">Column 1</div>
  <div class="box">Column 2</div>
</div>
<br>
<h2>Why do we use <code>font-size: 0</code> in the container?</h2>
<p>Elements with <code>display: inline-block</code> behave like text — and a white space appears between them, just like between words. This space comes from HTML, not CSS, and can disrupt alignment or layout proportions.</p>
<p>To remove that space, we set <code>font-size: 0</code> on the container. This way, the browser no longer “sees” the space as text and completely ignores it. Then, inside each element, we restore the normal text size, for example <code>font-size: 1.2rem</code>.</p>

.container {
  font-size: 0;
}
.box {
  display: inline-block;
  width: 49%;
  font-size: 1.2rem;
  background: #e0e0e0;
  padding: 20px;
  box-sizing: border-box;
  vertical-align: top;
}

2. Structures with `position: absolute`

The absolute method provides full control over an element's position relative to its container. It's useful for fixed layouts, sidebars, overlapping elements, or components that need to stay in a specific spot. However, it requires attention to scalability and the relationship with neighboring elements.

🔧 Live Example

<div class="container">
  <div class="box">Box</div>
</div>

.container {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #333;
}

.box {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: #ff6347;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

3. Position Fixed – Elements That Stay Visible on Scroll

position: fixed anchors the element to the browser window, not to a container. This means the element remains visible even when the user scrolls. It's ideal for fixed navigation bars, “Back to top” buttons, notifications, or persistent banners.

🔧 Live Example

<div class="fixed-box">Fixed!</div>
<div class="content">
  <p>Scroll down to see how it stays fixed.</p>
  <p style="margin-top: 1000px;">End of page</p>
</div>

.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.content {
  padding: 20px;
  font-family: sans-serif;
}

4. Position Sticky – Elements That Stick While Scrolling

position: sticky combines the behavior of relative and fixed. The element behaves normally until it reaches a specified position, then it “sticks” there during scrolling. It's ideal for section headers, secondary menus, or elements that need to stay temporarily visible.

🔧 Live Example

<div class="wrapper">
  <div class="sticky-box">Sticky!</div>
  <div class="content">
    <p>Scroll down to see how it sticks.</p>
    <p style="margin-top: 1000px;">End of page</p>
  </div>
</div>

.wrapper {
  padding: 20px;
}

.sticky-box {
  position: sticky;
  top: 10px;
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.content {
  margin-top: 20px;
  font-family: sans-serif;
}

Z-Index – Visual Layer Control

z-index determines the stacking order of elements. The higher the value, the more the element will appear above others. It only works on elements with a position other than static.

🔧 Live Example

<div class="layer layer1">Layer 1</div>
<div class="layer layer2">Layer 2</div>
<div class="layer layer3">Layer 3</div>

.layer {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 150px;
  height: 150px;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer1 {
  background-color: #dc3545;
  z-index: 1;
}

.layer2 {
  background-color: #ffc107;
  top: 80px;
  left: 80px;
  z-index: 2;
}

.layer3 {
  background-color: #28a745;
  top: 110px;
  left: 110px;
  z-index: 3;
}

Combined Positioning – Absolute-Fixed-Sticky-Z-Index

This example combines the most commonly used positioning methods in CSS. You'll see how absolute (precise positioning within a container), fixed (element fixed to the window), sticky (element that sticks while scrolling), and z-index (visual layer control) work together.

🔧 Live Example

<div class="fixed-banner">Fixed</div>

<div class="wrapper">
  <div class="sticky-header">Sticky</div>

  <div class="container">
    <div class="absolute-box">Absolute</div>
    <div class="overlay">Z-Index</div>
  </div>

  <div class="content">
    <p>Scroll down to see how each element behaves.</p>
    <p style="margin-top: 1000px;">End of page</p>
  </div>
</div>

.fixed-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  z-index: 1000;
}

.wrapper {
  margin-top: 50px;
  padding: 20px;
}

.sticky-header {
  position: sticky;
  top: 50px;
  background-color: #28a745;
  color: white;
  padding: 10px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 500;
}

.container {
  position: relative;
  height: 200px;
  background-color: #f0f0f0;
  margin-top: 20px;
  border: 2px solid #333;
}

.absolute-box {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: #dc3545;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 10;
}

.overlay {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 120px;
  height: 120px;
  background-color: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 20;
}

.content {
  margin-top: 40px;
  font-family: sans-serif;
}

Without diminishing the power of Flexbox and Grid, this tutorial has demonstrated that classic CSS techniques remain relevant and capable of providing full control over layout — when used skillfully.

🧠 Quiz – CSS Layouts Without Flexbox and Grid

Media Queries ➔

CSS Layouts Without Flexbox and Grid – Full Control with Classic Techniques

1. Structures with inline-block – Simplicity and Compatibility

2. Structures with position: absolute

3. Position Fixed – Elements That Stay Visible on Scroll

4. Position Sticky – Elements That Stick While Scrolling

Z-Index – Visual Layer Control

Combined Positioning – Absolute-Fixed-Sticky-Z-Index

🧠 Quiz – CSS Layouts Without Flexbox and Grid

Cookie Policy

1. Structures with `inline-block` – Simplicity and Compatibility

2. Structures with `position: absolute`