Creating a three-row CSS layout where the middle row aligns to the right side

Question

Creating a three-row CSS layout where the middle row aligns to the right side

I am working on developing a mobile device layout with 3 blocks. The first and third blocks contain text fields, while the second block is filled with a map. However, all of my blocks don't look good when they are too wide. The browser window can have two different orientations: book and album. When the orientation is album, I want to change the positions of the blocks. Allow me to demonstrate how I envision the behavior of these blocks for each of the two orientations.

BOOK ORIENTATION:

+------------+
|   First    |
+------------+
|            |
|   Second   |
|            |
+------------+
|   Third    |
+------------+

HTML:

<div>First</div>
<div>Second</div>
<div>Third</div>

ALBUM ORIENTATION:

+------------+-------------+
|   First    |             |
+------------+    Second   |
|   Third    |             |
+------------+-------------+

Is there a way I can achieve this layout switch based on orientation? Any help would be greatly appreciated!

javascript html css

Answer 1

Answer №1

Consider this:

Markup:

<section>One</section>
<section class="special">Two</section>
<section>Three</section>

Styling:

@media all and (max-width: 768px) {
  section {
    width:50%;
    float:left;
  }
  .special {
     background-color: yellow;
  }
}

Answer 2

Consider this:

Markup:

<section>One</section>
<section class="special">Two</section>
<section>Three</section>

Styling:

@media all and (max-width: 768px) {
  section {
    width:50%;
    float:left;
  }
  .special {
     background-color: yellow;
  }
}

Answer 3

Answer №2

When incorporating a table, it can be wrapped in a div with the ID "div1" and this jQuery function can be utilized:

$( window ).on( "orientationchange", function( event ) {
    if(event.orientation=="portrait") {
       $( "#div1" ).html("<table border="1"> <tr><td>First</td></tr> <tr><td>Second</td></tr> <tr><td>Third</td></tr></table>");
    }
    else if(event.orientation=="landscape") {
        $( "#div1" ).html("<table border="1"> <tr><td>First</td><td rowspan="2">Second</td></tr> <tr><td>Third</td></tr></table>");
    }
});

In the first scenario:

<table border="1">
   <tr>
       <td>First</td>
   </tr>
   <tr>
       <td>Second</td>
   </tr>
   <tr>
       <td>Third</td>
   </tr>
</table>

This arrangement yields:

+------------+
|   First    |
+------------+
|            |
|   Second   |
|            |
+------------+
|   Third    |
+------------+

In the second instance:

<table border="1">
   <tr>
       <td>First</td>
       <td rowspan="2">Second</td>
   </tr>
   <tr>
       <td>Third</td>
   </tr>
</table>

This configuration results in:

+------------+-------------+
|   First    |             |
+------------+    Second   |
|   Third    |             |
+------------+-------------+

Answer 4

When incorporating a table, it can be wrapped in a div with the ID "div1" and this jQuery function can be utilized:

$( window ).on( "orientationchange", function( event ) {
    if(event.orientation=="portrait") {
       $( "#div1" ).html("<table border="1"> <tr><td>First</td></tr> <tr><td>Second</td></tr> <tr><td>Third</td></tr></table>");
    }
    else if(event.orientation=="landscape") {
        $( "#div1" ).html("<table border="1"> <tr><td>First</td><td rowspan="2">Second</td></tr> <tr><td>Third</td></tr></table>");
    }
});

In the first scenario:

<table border="1">
   <tr>
       <td>First</td>
   </tr>
   <tr>
       <td>Second</td>
   </tr>
   <tr>
       <td>Third</td>
   </tr>
</table>

This arrangement yields:

+------------+
|   First    |
+------------+
|            |
|   Second   |
|            |
+------------+
|   Third    |
+------------+

In the second instance:

<table border="1">
   <tr>
       <td>First</td>
       <td rowspan="2">Second</td>
   </tr>
   <tr>
       <td>Third</td>
   </tr>
</table>

This configuration results in:

+------------+-------------+
|   First    |             |
+------------+    Second   |
|   Third    |             |
+------------+-------------+

Creating a three-row CSS layout where the middle row aligns to the right side

Answer №1

Answer №2

Similar questions

Revolutionary scroll-based navigation fill transition

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Update Refresh Token within Interceptor prior to sending request

Fieldset containing a table with a horizontal scrollbar

React-Native has reached the maximum update depth, please check the new state

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

Drop-down Navigation in HTML and CSS is a popular way to create

The div content is aligning at the baseline rather than the middle

When using TouchableWithoutFeedback, I encountered the following error message: "Error: React.Children.only expected to receive a single React element child."

A step-by-step guide on how to insert an image URL into the src attribute using the

Error: Trying to use Router without providing a middleware function. Please make sure to pass a valid middleware function while using Router

Please be aware that any fabricated comments will not be displayed in the posts object

Javascript-generated HTML elements are invisible

What is the best way to ensure bidirectional text appears correctly when two conflicting languages are combined, ensuring explicit directionality is set?

Anticipated a response in the form of an object, however, a string was delivered instead

"Displaying array objects in a select dropdown menu - a step-by-step guide

Stop the loop in cypress

"415 (Unsupported Media Type) encountered when making a POST request in a REST API

What is the best way to incorporate various styles into one :style attribute?

Resolution of JSP/HTML Pages