HTML Layouts

In HTML, layouts are used to structure the content on a webpage. Layouts can be created using various HTML tags and CSS properties. Here are some common layout techniques:

Basic Layouts

Fixed Layout

<div style="width: 1200px; margin: 0 auto;">
  <!-- content here -->
</div>

A fixed layout uses a specific width for the content, typically set in pixels. The content is centered on the page.

Fluid Layout

<div style="width: 100%;">
  <!-- content here -->
</div>

A fluid layout stretches to 100% of the screen width, adjusting based on the browser size.

CSS Flexbox Layout

Flexbox is a CSS layout model that allows for responsive design and efficient space distribution.

<div style="display: flex;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
  <div style="flex: 1;">Column 3</div>
</div>

Flexbox makes it easy to create responsive layouts with flexible widths.

CSS Grid Layout

CSS Grid is another layout model that allows you to create complex grid-based layouts.

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
  <div>Grid Item 3</div>
</div>

CSS Grid allows you to create layouts with rows and columns, making it easy to design complex page structures.

Responsive Layout

A responsive layout adapts to different screen sizes, such as desktop, tablet, and mobile views. This is often achieved using media queries.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

In this example, a container with a flexbox layout will stack its items vertically on smaller screens.

Layout Example

<div style="display: flex; flex-wrap: wrap;">
  <div style="flex: 1 1 200px;">Item 1</div>
  <div style="flex: 1 1 200px;">Item 2</div>
  <div style="flex: 1 1 200px;">Item 3</div>
</div>

This layout uses flexbox to create three columns. The columns are flexible and wrap when the screen size is smaller.

Sticky and Fixed Position Layouts

Sticky and fixed positioning can help keep elements fixed on the screen, even as the user scrolls the page.

<div style="position: sticky; top: 0;">Sticky Header</div>

<div style="position: fixed; top: 0; left: 0;">Fixed Header</div>

Sticky positioning keeps the element fixed within its container, while fixed positioning locks the element in place relative to the viewport.