Introduction to CSS Layouts

Layouts are the foundation of every website. They define how elements are arranged on a page, how users navigate, and how the design adapts to different screen sizes.

CSS provides several ways to control layouts:

• Normal Flow – default arrangement (top to bottom)
• Floats – used for sidebars and image wrapping
• Positioning – precise placement of elements
• Flexbox – a one-dimensional layout system (row or column)
• CSS Grid – a two-dimensional layout system (rows and columns)

Example – Normal Flow:

<style>
div {
  background: lightblue;
  margin: 10px;
  padding: 20px;
}
</style>

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

All boxes will be stacked vertically by default.

Practice Task:
Create a simple page with a header, content, and footer. First, see how they look without CSS (normal flow), then try using Flexbox to arrange them horizontally.