How to create a responsive two-column layout in CSS

Arif Billah Babu

          

  CSS



Image not found!!

Creating a responsive two-column layout in CSS involves using media queries to adjust the layout based on the screen size. Here's a simple example using HTML and CSS:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      overflow: hidden;
    }

    .column {
      width: 100%;
      float: left;
      box-sizing: border-box;
    }

    @media (min-width: 768px) {
      .column {
        width: 50%;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="column">
      <h2>Column 1</h2>
      <p>This is the content of column 1.</p>
    </div>
    <div class="column">
      <h2>Column 2</h2>
      <p>This is the content of column 2.</p>
    </div>
  </div>

</body>
</html>

In this example:

  • The container class sets a maximum width for the layout and centers it on the page.
  • The column class defines the basic styles for each column, and initially, both columns take up 100% width.
  • The @media query is used to adjust the width of the columns when the screen width is 768 pixels or more. In this case, each column will take up 50% of the width, creating a two-column layout.

You can customize this example based on your specific requirements, and you may need to adapt it further depending on the complexity of your layout and design.

Category List