Fluid Layouts

Part of the Styling with CSS section of Coddy's HTML journey — lesson 63 of 76.

In responsive web design, a fluid layout adjusts to different screen sizes using flexible grids and relative units like percentages instead of fixed pixel values. This helps the layout expand or shrink to fit any screen, ensuring a smooth user experience on all devices.

The key principles of fluid layouts include:

Relative units: Using percentages (%), viewport units (vw, vh), or ems (em) instead of fixed pixels (px) for widths, heights, margins, and padding.

Flexible grids: Using CSS Grid or Flexbox to create grid-based layouts that can adapt to different screen sizes.

Max-width and min-width: Setting maximum and minimum widths for elements to prevent them from becoming too wide or too narrow on extreme screen sizes.

Here's an example of a basic fluid layout using percentages:

.container {
    width: 90%; /* The container takes up 90% of the viewport width */
    max-width: 1200px; /* The container will not exceed 1200px */
}
.sidebar {
    width: 30%; /* The sidebar takes up 30% of the container width */
    float: left;
}
.main-content {
    width: 70%; /* The main content area takes up 70% of the container width */
    float: left;
}

In this example, the .container element has a fluid width of 90%, which means it will always take up 90% of the viewport width. The max-width property is set to 1200px to prevent the container from becoming too wide on large screens.

The .sidebar and .main-content elements have fluid widths of 30% and 70%, respectively, allowing them to adapt to the container's width.

Challenge

Easy

You are given an HTML document with a parent division (<div>) that contains two child divisions (<div>) with the classes sidebar and main. Your task is to create a fluid layout using percentages. Follow the steps below:

Write a CSS rule that targets the <div> element with the class container. Set its width property to 80% and margin to 0 auto. Add a border of 1px solid black for visualization.
Write a CSS rule that targets the <div> element with the class sidebar. Set its width property to 25% and make it float to the left.
Write a CSS rule that targets the <div> element with the class main. Set its width property to 75% and make it float to the right.

Cheat sheet

A fluid layout adjusts to different screen sizes using flexible grids and relative units like percentages instead of fixed pixel values.

Key principles of fluid layouts:

Relative units: Use percentages (%), viewport units (vw, vh), or ems (em) instead of fixed pixels
Flexible grids: Use CSS Grid or Flexbox for adaptable layouts
Max-width and min-width: Set limits to prevent elements from becoming too wide or narrow

Basic fluid layout example:

.container {
    width: 90%; /* Takes up 90% of viewport width */
    max-width: 1200px; /* Won't exceed 1200px */
}
.sidebar {
    width: 30%; /* 30% of container width */
    float: left;
}
.main-content {
    width: 70%; /* 70% of container width */
    float: left;
}

Try it yourself

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>