How to create responsive floating sidebars out of containers

How to create responsive floating sidebars out of containers

Creating responsive floating sidebars using HTML and CSS involves a combination of HTML structure and CSS styling.

Now learn how to create responsive floating sidebars out of containers in HTML and CSS. Below is a step-by-step guide on how to create responsive floating sidebars using containers:

If your are a laravel developer the check this how to use widget in laravel application.


<!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <div class="container">
        <div class="sidebar">
            <!-- Sidebar Content -->
        <div class="main-content">
            <!-- Main Content -->


/* Reset some default styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;

.container {
    display: flex;
    height: 100%;

.sidebar {
    background-color: #333;
    color: #fff;
    width: 250px; /* Adjust the width as needed */
    min-width: 0; /* Allow the sidebar to shrink on smaller screens */
    flex: 0 0 auto; /* Sidebar doesn't grow or shrink */

.main-content {
    flex-grow: 1; /* Main content area grows to fill remaining space */
    padding: 20px; /* Add spacing to the main content */

This code will create a basic responsive floating sidebar layout. Here's what each part does:

  1. We start with a basic HTML structure, with a .container div containing two child divs: .sidebar and .main-content.
  2. In the CSS, we reset some default styles to ensure a clean starting point.
  3. .container uses display: flex to create a flex container. This allows the sidebar and main content to be placed side by side.
  4. .sidebar is styled with a background color and width. You can adjust the width as needed. min-width: 0 ensures that the sidebar can shrink on smaller screens.
  5. .main-content is styled to grow and fill the remaining space in the container using flex-grow: 1.

To make this layout responsive, you can use media queries in your CSS to adjust the sidebar's width and other styles for different screen sizes. For example:

@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack sidebar and main content on small screens */

    .sidebar {
        width: 100%; /* Make the sidebar full width on small screens */

With these media queries, the layout will stack the sidebar and main content vertically on screens with a width of 768 pixels or less, making it responsive.

Related posts

Write a comment