3 Methods for Implementing a Floating Header, Main Content, and Sidebar with Responsive Design

Question

3 Methods for Implementing a Floating Header, Main Content, and Sidebar with Responsive Design

I am following a mobile-first approach with 3 containers that need to be displayed in 3 different layouts as shown in the image below:

https://i.sstatic.net/UjKNH.png

The closest CSS implementation I have achieved so far is this:

HTML:

<header>...</header>
<aside>...</aside>
<main>...</main>

CSS

@media screen and (max-width: 480px) {
    header,
    main, 
    aside { width: 100%; }
}

@media screen and (max-width: 960px) {
    main { float: left; width: 60%; }
    aside {float: right; width: 40%; }
}

@media screen and (min-width: 961px) {
    header: { float: left; width: 60%; }
}

Unfortunately, in the first layout, the aside container appears right below the header instead of below the main container. Is there a way to achieve this using CSS only? I'm also open to exploring JavaScript workarounds. Thank you!

javascript html css css-float

Answer 1

Answer №1

If you want to achieve the first layout, simply adjust your HTML structure. Below is a straightforward CSS solution for creating three different layouts.

* {margin:0;}
header {
  background: #eee;
}
main {
  background: #ddd;
}
aside {
  background: #ccc;
}
header,main,aside {
  min-height: 100px;
}
@media screen and (min-width: 481px) and (max-width: 960px) {
  main {
    float: left;
    width: 60%;
  }
  aside {
    width: 40%;
    float: left;
  }
}
@media screen and (min-width: 960px) {
  header, main {
    max-width: 60%;
  }
  aside {
    width: 40%;
    position: absolute;
    top: 0; right: 0;
    bottom: 0;
  }
}

<header>header</header>
<main>main</main>
<aside>aside</aside>

Answer 2

If you want to achieve the first layout, simply adjust your HTML structure. Below is a straightforward CSS solution for creating three different layouts.

* {margin:0;}
header {
  background: #eee;
}
main {
  background: #ddd;
}
aside {
  background: #ccc;
}
header,main,aside {
  min-height: 100px;
}
@media screen and (min-width: 481px) and (max-width: 960px) {
  main {
    float: left;
    width: 60%;
  }
  aside {
    width: 40%;
    float: left;
  }
}
@media screen and (min-width: 960px) {
  header, main {
    max-width: 60%;
  }
  aside {
    width: 40%;
    position: absolute;
    top: 0; right: 0;
    bottom: 0;
  }
}

<header>header</header>
<main>main</main>
<aside>aside</aside>

Answer 3

Answer №2

One option is to utilize the css3 media selector:

@media screen and (max-width: 480px) {
    ...
}
@media screen and (min-width: 481px) and (max-width: 960px) {
    ...
}
@media screen and (min-width: 960px) {
    ...
}

Check out the CSS3 @ media Rule here

Answer 4

One option is to utilize the css3 media selector:

@media screen and (max-width: 480px) {
    ...
}
@media screen and (min-width: 481px) and (max-width: 960px) {
    ...
}
@media screen and (min-width: 960px) {
    ...
}

Check out the CSS3 @ media Rule here

3 Methods for Implementing a Floating Header, Main Content, and Sidebar with Responsive Design

Answer №1

Answer №2

Similar questions

Learn how to retrieve the value of an associated field at a specific index by utilizing a combo box in JavaScript when receiving a JSON response

Perform queries securely using AJAX when the document is fully loaded

How can we stop the brief display of a hidden div from occurring?

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Restarting a JavaScript function upon switching views in Vue.js

``Is there a way to retrieve the file path from an input field without having to submit the form

Is it acceptable to nest an HTML document within the <body> tag of another HTML document?

The method I used to position a triangle at the bottom border of a parent element with relative

What is the best way to align inline circles created with CSS vertically as the screen size changes?

Alter the configuration of a JSON object

Different conversations are taking place concurrently. How can we determine which one is currently being attended to

Transmit responses from PHP script

Javascript is failing to execute promises in sequence

Adding text with jQuery

Borders are absent on several div elements

Discover the best correlation among multiple arrays

Is it possible to hide a fixed header on scroll in a mobile device?

I'm confused by the function: "sort((a: Article, b: Article) => b.votes - a.votes);"

Updating the titles of Bootstrap 4 Switches on the fly

Sign up for your own personalized Express and HBS helper now!