What is the best way to manage the order of <div> display in responsive design?

After extensive searching on Google and StackOverflow, I have yet to find a solution to my issue. My question is, how can I ensure that when the browser reaches a certain breakpoint, the mainleft div with left float moves underneath the mainright div with right float?

Unfortunately, this stackoverflow thread discussing the priority of floating divs did not provide a solution for me: Responsive CSS div positioning priority

You can view my problem on jsfiddle at the following link:

https://jsfiddle.net/jamshidi/8ahb03qn/1/

Html:

 <div class="maincontainer">
 <div class="mainleft">
 mainleft
 </div>
 <div class="mainright">
 mainright
 </div>
 </div>
 <footer>
 <div class="footer-end">
 footer
 </div>
 </footer>

CSS:

 .maincontainer{
 height:auto;
 width: 700px;
 margin-top: 0px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 0px;
 background-color: red;
 overflow: hidden;  
 }
.mainleft{
float: left;
width: 200px;
height:auto;
background-color: #D0D1F9;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
 .mainright{
float: right;
width: 500px;
height:auto;
background-color: #C4F4D6;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
 .footer-end{
height:35px;
width: 700px;
background-color: #bb0700;
color:#fff;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
clear:both;
}
  @media screen and (max-width: 500px) {
.mainleft{
float: none;
width: 100%;
height:auto;
background-color: #D0D1F9;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
 .mainright{
float: none;
width: 100%;
height:auto;
background-color: #C4F4D6;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}

}

htmlcssresponsive-design

Answer №1

There are two methods to achieve this effect; one using CSS and the other utilizing jQuery.

Method 1: Using CSS: Apply float:right to both divs and adjust the HTML sequence (putting mainright first followed by mainleft)

.maincontainer{height:auto;width: 700px;margin-top: 0px;margin-right: auto;margin-left: auto;margin-bottom: 0px;background-color:red;overflow:hidden;}.mainleft{float:right;width:200px;height:auto;background-color:#D0D1F9;margin-top:0px;margin-right:auto;margin-left:auto;margin-bottom:0px;}.mainright{float:right;width:500px;height:auto;background-color:#C4F4D6;margin-top:0px;margin-right:auto;margin-left:auto;margin-bottom:0px;}.footer-end{height:35px;width:700px;background-color:#bb0700;color:#fff;padding-right:0px;margin-top:0px;margin-right:auto;margin-left:auto;margin-bottom:0px;clear:both;}@media screen and (max-width: 500px) {.mainleft{float:none;width:100%;height:auto;background-color:#D0D1F9;margin-top:0px;margin-right:auto;margin-left:auto;margin-bottom:0px;}.mainright{float:none;width:100%;height:auto;background-color:#C4F4D6;margin-top:0px;margin-right:auto;margin-left:auto;margin-bottom:0px;}}
<div class="maincont...

Alternatively, view the example on JSFiddle for a solution with CSS at: solution with CSS

You can also achieve this effect with CSS by keeping float:left on mainleft while adjusting the structure as demonstrated above.

Method 2: Using jQuery (if HTML structure cannot be modified): When $(window).width() is less than 500px, relocate mainleft after mainright

$(window).on("resize",function(){if($(window).width() < 500) {$('.mainleft').insertAfter('.mainright')}})
.maincontainer{height:auto;width:700px;margin-top:0px;margin-right:auto;margin-left:auto;margin-bottom:0px;background-color:red;overflow:hidden;}.ma...

For an example using jQuery, visit the JSFiddle link: solution with jQuery

Answer №2

One strategy to achieve this may involve adjusting the positioning of the div elements before reaching the breakpoint. An effective approach could be implementing float:left and float:right alongside organizing the HTML structure in a hierarchically opposite manner.

Check out the Fiddle here

Answer №3

To achieve the desired layout, you can utilize CSS3 to position your divs accordingly.

<div class="maincontainer">
 <div class="mainright">
 mainleft
 </div>
 <div class="mainleft">
 mainright
 </div>
 </div>
 <footer>
 <div class="footer-end">
 footer
 </div>
 </footer>

By reordering the div positions as shown in the code snippet and applying the specified CSS rules, you can achieve the desired result.


    .mainright{
    float:right;
width:70%;
    }
    .mainleft{
    float:right;
width:30%;
    }
@media screen and (max-width: 767px) {
.mainright{
    float:none;
width:100%;
    }
    .mainleft{
    float:none;
width:100%;
    }
}

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

PHP Implementing real-time dynamic categories

I am working on a project where there are multiple items listed with unique IDs. Each item has corresponding data with the same ID. I want to use JQuery, JScript, and PHP to display options based on the ID of the selected item in real-time. Below is a snip ...

javascriptphpjqueryhtmlcss

The onclick function fails to function properly following an Ajax reload of the <div> element

I have an issue with my onclick function that only works the first time. Every time the onclick function triggers an ajax request, it successfully reloads a div which contains code to retrieve values from SQL and build an HTML table using a for loop. Alth ...

javascriptphphtmlajax

How to use JavaScript to create a spinning wheel that stops automatically at the center of a randomly selected slice

Building on the concept of creating a spinning image with CSS and jQuery, I am looking to take it a step further. In my project, a seven-part wheel spins and the correct values are displayed when it stops spinning. However, I have a specific requirement - ...

jquerycss

jQuery id selector issue: not selecting elements properly

It seems like I am overlooking a very fundamental aspect here. Essentially, there are 2 div elements in the HTML markup. When one is clicked (#x), the other div element (#block1) gains a new class (.change), resulting in a change in its color. The issue ...

jqueryhtmlcssclick

What HTML template is your go-to when starting a new project?

Is this the ultimate solution for creating a basic "Hello World" HTML template? I have been experimenting with this starter code to develop simple websites. Are there any other interesting tags I could incorporate to enhance it further? Usually, I refer ...

jqueryhtmlcsstemplatesbootstrap-4

What steps should I take to resolve the CSS layout issue specifically on iPhone Safari browser?

It's functional on Chrome desktop However, it has issues on Safari iOS Here is the CSS code snippet .button { border: 1px outset $color3; background: $color1; color: $color4; font-size: 80%; // Reduced size due to uppercase text ...

htmlioscssiphonesafari

CSS background image with a see-through overlay

I am trying to add a black overlay with an opacity of 0.7 to a full-screen background image. This is the CSS code I currently have: body { background:url(../images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-backgr ...

css

changing tooltip color in bootstrap based on the parent element

Is there a way to adjust the bootstrap tooltip background-color based on the container? For example, my header has a white background and my footer is black. #header .tooltip-inner{ background-color:fade(@grayWhite,80); } #footer .tooltip-inner{ backgro ...

csstwittertooltip

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

cssreactjsflexbox

The radio input is not being properly checked using ng-checked in Angular

The ng-checked attribute is causing issues in the application, specifically with radio buttons. It seems to be working fine for checkboxes but not for radio buttons. <input type="radio" class="radio" name="job_class_radio" ng-checked="key===jobClassDat ...

javascriptangularjshtmlradio-button

Having trouble retrieving the complete URL on the Login Page within Shopify

I've been working on a feature where users are redirected to different URLs based on the page they click the login button on. For example, I have a registration page and a regular page, both with a login button. When a user clicks the login button on ...

javascripthtmlshopifyhttp-redirectliquid

SweetAlert html is not recognizing ng-app, but it functions correctly within the html body

When inserting a bootstrap table inside a SweetAlert, I encountered an issue where using ng-app or ng-repeat to populate data inside the table's rows did not call ng-app. However, when populating the table outside of the SweetAlert in the body, ng-app ...

javascripthtmlangularjssweetalertng-controller

"Efficiently setting up individual select functions for each option in a UI select menu

I've integrated UI Selectmenu into my current project UI selectmenu includes a select option that allows for setting select behavior across all selectmenu options, as shown in the code snippet below: $('.anything'). selectmenu({ ...

javascriptjqueryhtmljquery-uiselect-menu

Centralized Title / Side-aligned Menu

Good day, I am in need of assistance with a menu layout for my website. My goal is to have the title centered with the menu flexed out to the sides, but I'm encountering some issues. The colors included are just for testing purposes and will be update ...

cssmenuflexboxtitle

Prevent the dropdown from closing after clicking on a href link

Is there a way to ensure that my dropdown remains open even after a page reload? I'm looking for a solution where clicking on an item(href) within the dropdown will keep it open after redirection. I've tried using the jQuery method called stopPr ...

javascriptjqueryhtml

HTML 5 - GRUNT BUILD: The error message "Fatal error: Object has no method 'compact'" is causing issues with the build process

Currently, I am working on a project using GRUNT. However, I encountered an error while building the project: Running "cuff:dev" (cuff) task >> Building src/pages/home Fatal error: Object home.less has no method 'compact' The erro ...

htmlgruntjsnpm

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

javascriptjquerycssoopvelocity.js

Adding hyperlinks that do not redirect

I have 2 separate divs displayed on a website: <button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button> <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks"& ...

javascriptjqueryhtmllaravel-blade

Using Express.js to render an HTML table in a web page

Is there a way to display a full table using the res.render method? This is what I'm attempting to do: I need to define where to send one of my tables. main.hbs <html> ... <div id="main_frame" class="col s12">{{{bod ...

htmlnode.jsexpress

What are the different approaches for creating a website that adapts to different screen sizes and devices

The popularity of responsive web design is growing rapidly. While many recognize Twitter Bootstrap as a top framework, there are other options worth exploring. Several impressive examples of responsive websites, such as Smashing Magazine and CSS Tricks, ...

htmlcssresponsive-designmedia-queries