Utilizing float positioning in Responsive Web Design

Attempting to implement a two-column float CSS layout with specific width percentages. My CSS styles for the two columns are as follows:

.div1 {
 width: 25%;
 float: left;
}

.div2 {
 width: 75%;
 float: right;
}

.container {
 width: 960px;
}

@media screen and (max-width: 320px) {
 .div1, .div2 {
 width: 100%;
 display: block;
 float: none;
 clear: both;
 }
 .container {
  width: 100%;
 }
}

The corresponding HTML structure is:

...
<div class="container">
 <div class="div1">
 ... content goes here
 </div>
 <div class="div2">
  <img src="photo_location"/>
 </div>
</div>

Currently, at 320px width, Div II drops below Div I as expected in responsive design. However, the goal is to have Div II appear above Div I using CSS floats. How can this approach be achieved?

cssresponsive-design

Answer №1

Check out the live example here

.container1 {
width: 25%;
float:left;
background:orange;
}

.container2 {
width:75%;
float: right;
background:red;
}

@media screen and (max-width: 320px) {
.container1, .container2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.container1{
position:relative;
top:100px;
}
.container2{
position:absolute;
top:0;
height:100px;
}
}

Answer №2

Change the positions of div1 and div2 in the HTML code.

Although not semantically correct, the layout will still function properly.

Maintain the same CSS styling and structure your HTML like this:

<div class="div2">Text for box 2</div>
<div class="div1">Text for box 1</div>

See the demo here: http://jsfiddle.net/u3Ng3/1/

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

What is the best way to adjust the color of the colon within my timer digits using a span element?

I am facing an issue with my timer where the span that was created to display a colon between the numbers does not change color along with the timer digits. I attempted using var colon = document.getElementById(":"); but it still did not work as expected. ...

javascripthtmlcsstimer

Using Jquery: Removing the strikethrough effect upon the second click!

Currently in the process of learning Jquery and experimenting with using a button to apply a "text-decoration" to a list item upon clicking. However, I encountered an issue where I couldn't figure out how to use the same button to remove the "text-dec ...

jquerycss

Guide to pinpointing a location with Google Maps

I am currently working on setting up a contact page that includes Google Maps to show the location of a meeting place. Here is the code I am using: JavaScript (function(){ document.getElementById('map_canvas').style.display="block"; var ...

javascripthtmlcss

Implementing jQuery to showcase an element on the screen

I would like to express my gratitude to everyone who has helped me. Please forgive my poor English :) Can someone provide me with a jQuery script that can extract the name of the currently selected tab and display it in an h1 tag? Whenever the selected ta ...

jqueryhtmlcss

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

javascriptjqueryhtmlcsstwitter-bootstrap

Direct your attention towards the specific target div element using the get function

I need assistance with a webpage where items are listed using unique ids. I want the page to scroll up or down, depending on which link the user clicks, to find the element with the id specified in the address bar as foo=or2. Additionally, I would like the ...

jqueryhtmlcss

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

javascripthtmlcss

Items vanish when hovering over them

Creating nested links in the sidebar navigation bar with CSS has been a challenge for me. While hovering over main links, I can see the sub-links being displayed. However, when I try to hover/click on the children of the sub-links, they disappear. Note: M ...

htmlcssreactjssass

Placing 2 elements next to each other - Where the left element remains static and the right element's width increases as the page expands

Hey there! I'm really struggling to position two elements, an aside and a section (I believe the use of these HTML5 elements is important for their content). On this page Click Here, my goal is to keep the 'Locations' (Aside) element static ...

csshtmlpositioning

The dropdown menu items spill out beyond the confines of the container

I'm currently facing some challenges and struggling to find a solution. Unfortunately, I haven't been able to find any guidance on this issue. Important: To view the output, click on "Run snippet" and make it full screen by clicking on the hamb ...

htmlcsssassbulma

Vue 2 does not properly transition the initial element when using the `mode=out-in` attribute

In my Vue project, I am using version 2.6.14 and trying to toggle between two buttons by utilizing v-if and v-else. Despite wrapping everything in a transition element, the first button doesn't transition smoothly, neither when appearing nor disappear ...

cssvue.jsvuejs2nuxt.jscss-transitions

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

javascripthtmlcsscanvas

Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example: CSS module file: @media(max-width: 800px) { .myClass{ /* ...mobile styles */ } } @media(min-width: 800px) { .myC ...

cssnext.jscss-modules

Troubleshooting Problem with Responsive Bootstrap Navbar

I've been working on creating a menubar using Bootstrap where the logo image is centered instead of being on the left side of the bar. However, I'm facing an issue where the right links in the menu go off the screen. When I view the page with a w ...

htmlcsstwitter-bootstrap

Organized grid design where every element occupies its own required space

Here's the current image I have displayed: https://i.sstatic.net/qKH8x.jpg This image is being styled by the following code: .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); } I've been searching for a solution ...

htmlcssflexboxcss-grid

Producing identical sets of 2 random hues for a pair of distinct items

I am trying to figure out a way to assign the same randomly generated color to two separate objects. Does anyone have any suggestions on how I could link these two objects so that they always have matching colors, refreshed whenever a condition is met? T ...

htmlcssrandomcolorsp5.js

Concealing a CSS class with PHP within the Wordpress Woocommerce platform

I have very limited knowledge in programming and need help with a code snippet. I am using the Wordpress Snippets Plugin to hide the Add Cart Button from a single product. add_action( 'wp', 'rudr_remove_add_to_cart_single_product' ); fu ...

phpcsswordpressclasswoocommerce

Tips for ensuring that hover:after contents do not impact the positioning of the next element

I have created a photo list section on my webpage. <div id="main_post_photo"> <% for(var q=0;q<resolve.length;q++){ if(resolve[q].images.length>=1){%> <a href='/post/<%= resolve[q]._ ...

htmlcss

Having trouble with the focusout() function not registering on the search box?

When using the focusout function, I encountered an issue where clicking on a title in the search results would prevent redirecting to the title page. Although the function worked properly when closing the search results by clicking on a different element o ...

htmljquerycss

Lines running horizontally on either side of the text

I recently found a helpful solution on Stack Overflow, but it's not exactly what I'm looking for due to two main reasons: I am unsure how to adjust the width of the lines to make them shorter. The solution uses H2, however, I have already d ...

htmlcsswordpress