Transitioning from vertical to horizontal orientations in flexbox design

I am looking to achieve the layout shown in this image using flexbox:

The image illustrates both portrait and landscape orientations. The left side represents the portrait view while the right side displays the landscape view.

My goal is to optimize my HTML to be as concise as possible. Is it feasible to accomplish this layout with flex?

For the portrait view, everything is functioning seamlessly since it consists of just one column.

However, I have encountered a hurdle when transitioning to the landscape orientation.

In this scenario, I aim for the navigation to be positioned on the right side of the screen while the remaining content is displayed on the left.

header, footer, main, nav {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  min-height: 120px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}
section {
  display: flex;
  flex-direction: column;
}
@media only screen and (orientation: landscape) {
  /* Currently uncertain */
}
<section>
  <header>header</header>
  <main>content</main>
  <nav>navigation</nav>
  <footer>footer</footer>
</section>

Thank you sincerely for your assistance!

htmlcssflexbox

Answer №1

To ensure this layout is compatible with flexbox, it is important to set a fixed height on the container. Without this, the flex items will not know where to wrap and the navigation element will not shift to the right column.

In this scenario, since the layout seems to cover the entire viewport, using height: 100vh along with the order property should suffice. No need for any changes in the HTML structure.

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, footer, main, nav {
  flex: 1;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}

@media only screen and (orientation: landscape) {
  section {
    flex-wrap: wrap;
  }
  nav {
    flex-basis: 100%;
    order: 1
  }
}

body { margin: 0; }
<section>
  <header>header</header>
  <main>content</main>
  <nav>navigation</nav>
  <footer>footer</footer>
</section>

Check out the jsfiddle demo here

For more options, you can visit: How to make a div span two rows in a grid?

Answer №2

If you're unable to specify a fixed height for the section, an alternative approach is to position the navigaton element absolutely within the layout.

header, footer, main, nav {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  min-height: 120px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}
section {
  display: flex;
  flex-direction: column;
}
@media only screen and (orientation: landscape) {
  section {
    position: relative;
  }
  header, footer, main {
    width: calc(60% - 10px);         /*  10px accounts for the margin spacing */
    box-sizing: border-box;
  }
  nav {
    position: absolute;
    top: 0;
    min-height: calc(100% - 10px);   /*  10px accounts for the margin spacing */
    right: 0;
    width: calc(40% - 10px);         /*  10px accounts for the margin spacing */
    box-sizing: border-box;
  }
}
<section>
  <header>header</header>
  <main>content</main>
  <nav>navigation</nav>
  <footer>footer</footer>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the 'name' attributes of selected checkboxes using Express in Node.js

I want to extract the "name" properties from the checked checkboxes in my NodeJS / Express application so that I can download the selected files from a server directory. The Frontend is built using EJS and it generates divs, paragraphs, and checkboxes with ...

htmlnode.jsexpressejs

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...

htmlcss

Is it possible to indicate which mat-tab has been clicked? Especially when the mat-tabs are being generated dynamically

In my UI, I have a dynamic display of mat-tabs that change in number and data based on values from the backend. These tabs are generated dynamically, and when one is clicked, an ID is passed to a function for processing. I want to be able to identify the s ...

htmlcssangularangular-materialangular6

I'm looking to showcase a snippet of my dynamic text in this section, limited to just two lines and ending with three dots, with a "read more" link positioned alongside

I've attempted using the CSS ellipsis property, but it's cutting off the first line. I want to display two lines (or set a max character length if possible). I looked into the 'limit' property in Angular to trim text, but it's not ...

htmlcssangulartypescript

How can we apply a hover effect to combine two rows in a table as one using CSS?

I'm having trouble figuring out how to highlight every two rows in a table as one when hovering over the current row. For example, if I hover on row 2, rows 2 and 3 should be highlighted. Then when I move to row 4, rows 4 and 5 should be highlighted, ...

htmlcss

html and css code to create a linebreak ↵

I received a JSON response from the server, and within this data is a "return line" in the text. {text: "I appear in the first line ↵ and I appear in the second line"} However, when I try to display this on an HTML page, the "return line" does not show ...

javascripthtmlcss

Utilizing Java in JSP to execute jQuery functionality through a hyperlink

Working on a project with my school group and encountering some difficulties... We have a table in which we are using JSP to populate with data through a for-loop. Each cell in the table represents an object utilizing JPA with its own unique id. In our ...

jqueryhtmlajaxjsp

Hiding and Revealing Different Divs using Hide/Show_trait

I have implemented a Javascript code to toggle the visibility of different divs based on icon clicks. However, I am facing an issue where clicking on another icon does not close the previously opened div. I want only one div to be open at a time and for th ...

javascripthtmltwitter-bootstrapshow-hide

Moving the Bootstrap-5 navbar button in a horizontal direction from left to right

I am looking to reposition the buttons on this bootstrap5 navbar from the left side to the right side. I need help figuring out how to accomplish this using css or bootstrap5. Can anyone provide some guidance? Here is my current code: <link href=" ...

htmlcsstwitter-bootstrapbootstrap-5

Adjusting the display of HTML elements depending on geolocation authorization

I am currently facing an issue with my HTML code where I want to show an element only if the user declines to share their location with the browser. However, my code is not functioning as expected when the user rejects the location request. On the other ha ...

javascripthtmlcss

Ajax calls within nested functions are not being executed in the correct sequence

Currently, I am utilizing the geonames API to retrieve geographical information. My objective is to extract the names of states within a country using the getStateInfo function and subsequently obtain a list of cities in each state through the getCityInfo ...

jqueryhtmlajaxpromisegeonames

Aligning an element vertically with the surrounding text on the same line

Trying to incorporate inline input range elements in a way that aligns with the line while also aligning with the right edge of the outer div has proven to be challenging. The HTML on the site is formatted using prettify, resulting in <span> elements ...

htmlcss

What is the best way to create a button that functions as a toggle and changes its styling when clicked?

I have implemented the following code to update prices in my pricing table: function updatePrices() { var x = document.getElementById("prijs-small"); if (x.innerHTML === "17,50") { x.innerHTML = "13,50"; } else { x.innerHTML = "17,50"; } ...

javascripthtmljquerycsswordpress

Is it necessary for two inline divs to be floated?

I am facing an issue with my layout. I have two child divs within a parent div, each set to 50% width and displayed inline. To style the parent div, I am using the :after pseudo-element to draw a horizontal rule () with 15px top and bottom margins. The pr ...

htmlcss

The TinyMCE extension in Yii fails to load CSS files when accessed through a subdomain

My Yii application located at site.com/module has the tinymce extension installed, but I am facing an issue where the tinymce CSS files are not loading when I access the application through the sub-domain alias module.site.com. Interestingly, all JS file ...

cssyiitinymce

Is there a way to showcase a single HTML canvas across multiple div elements?

I'm currently developing a web application that includes a Google Maps feature in two different tabs using Twitter Bootstrap. I am exploring options to have one canvas element that can be displayed in both tabs with varying dimensions. One idea is to ...

javascriptjqueryhtmltwitter-bootstrap

Highlight react-bootstrap NavItems with a underline on scroll in React

I am currently working on a website where I have implemented a react-bootstrap navbar with several Nav items. My goal is to enable smooth scrolling through the page, where each section corresponds to an underlined NavItem in the navbar or when clicked, aut ...

javascriptcssreactjsreact-bootstrap

Spotting the Visible Element; Detecting the Element in

Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...

javascriptjqueryhtmlcss

Tips for aligning an image in the center of a div

I'm facing a challenge that seems simple, but I just can't seem to crack it. Here's the HTML snippet in question: <div class="product"> <img src="product123.png" /> </div>` Accompanied by the following CSS: .product { ...

htmlcssmargin

Issue with rendering SVG <g> element in Backbone view

I'm currently developing an application with Backbone and running into issues with a view where the "el" property is a dynamically created <g> element. Here's the code snippet for the view: var DependencyLineView = Backbone.View.extend({ ...

javascriptjqueryhtmlbackbone.jssvg