Position the div to float on the right side and then have it drop below on smaller screens

Question

Position the div to float on the right side and then have it drop below on smaller screens

I'm currently working on implementing a design effect similar to the one shown below:

on my website (), but I'm struggling with getting the HTML and CSS just right. When I move the map to float up on the right side, it doesn't drop below the text when the width is reduced. I've tried different approaches but haven't found the perfect solution yet. Any suggestions would be greatly appreciated. Thank you!

EDIT - Apologies for the lack of information in my initial post. I am using a responsive layout (WP Twenty Thirteen theme). If I set the text div to float: left and the map iframe to float: right, the text div takes up the entire width, causing the map to drop down. I want the text div to resize along with the window without setting a specific width. (I prefer not to have to adjust the map's dimensions as well by using percentage widths.)

Placing the iframe first in the HTML code keeps the map at the top without specifying a width (similar to the first three frames in the illustration), but then it doesn't drop below the text. To achieve the desired effect in the last frame of the GIF, I had to move the iframe back below the text.

Is there a way to achieve what I want without defining a width for the text div? If not, I might have to settle for the map resizing accordingly. However, I'd prefer to avoid that solution if possible.

html css

Answer 1

Answer №1

Implement @media queries in your code like so:

.sidebar { float: right; }
@media (max-width: 600px) {
   .sidebar { float: none; }
}

This CSS will adjust the styling of the .sidebar class based on screen size. When the screen is 600px or smaller, it will remove the float property, and for larger screens, it will keep the float set to right. You can customize the breakpoint value as needed.

Answer 2

Implement @media queries in your code like so:

.sidebar { float: right; }
@media (max-width: 600px) {
   .sidebar { float: none; }
}

This CSS will adjust the styling of the .sidebar class based on screen size. When the screen is 600px or smaller, it will remove the float property, and for larger screens, it will keep the float set to right. You can customize the breakpoint value as needed.

Answer 3

Answer №2

JSFIDDLE

To style the left block, apply the following CSS:

float:left;
width:50%;

The current width is set to 100% automatically, so you need to separate the content as 50% on each side.

Next, for the container block, clear the float by adding:

 display:inline-block;

Answer 4

JSFIDDLE

To style the left block, apply the following CSS:

float:left;
width:50%;

The current width is set to 100% automatically, so you need to separate the content as 50% on each side.

Next, for the container block, clear the float by adding:

 display:inline-block;

Answer 5

Answer №3

Instead of requesting the answer outright, seek guidance on how to approach the problem using your existing code.

Your goal is to design a responsive layout. This can be accomplished by incorporating media queries within your CSS. Here's an example:

@media (max-width: 990px) {
    .sidebar {
        float: left;
    }
}

There are three main methods to achieving your desired outcome:

Build your layout from scratch
- Create a basic responsive site with CSS
- Develop a Responsive, Mobile-Friendly Website from Scratch
- Explore Useful Responsive Web Design Tutorials
- Learn about building responsive layouts
- ...
Utilize a grid system
- Responsive Grid System
- Check out the Best Responsive CSS Grid Systems for Your Web Designs
- Explore the 34 Responsive Grid System
- Discover more about the Responsive Grid System
- Learn about the Golden Grid System
- ...
Consider using a web tool
- Check out Responsive Web CSS

You have the freedom to choose which approach suits you best. However, sharing a fiddle or some code snippets would enable us to provide more tailored assistance. ;)

Answer 6

Instead of requesting the answer outright, seek guidance on how to approach the problem using your existing code.

Your goal is to design a responsive layout. This can be accomplished by incorporating media queries within your CSS. Here's an example:

@media (max-width: 990px) {
    .sidebar {
        float: left;
    }
}

There are three main methods to achieving your desired outcome:

Build your layout from scratch
- Create a basic responsive site with CSS
- Develop a Responsive, Mobile-Friendly Website from Scratch
- Explore Useful Responsive Web Design Tutorials
- Learn about building responsive layouts
- ...
Utilize a grid system
- Responsive Grid System
- Check out the Best Responsive CSS Grid Systems for Your Web Designs
- Explore the 34 Responsive Grid System
- Discover more about the Responsive Grid System
- Learn about the Golden Grid System
- ...
Consider using a web tool
- Check out Responsive Web CSS

You have the freedom to choose which approach suits you best. However, sharing a fiddle or some code snippets would enable us to provide more tailored assistance. ;)

Answer 7

Answer №4

It appears that the content area div in question lacks a specific identifier, causing it to adopt the styles of its neighboring divs. Assigning it a name and specifying a fixed width with a float-left property should resolve this issue and correctly position the map on the right side automatically.

Answer 8

It appears that the content area div in question lacks a specific identifier, causing it to adopt the styles of its neighboring divs. Assigning it a name and specifying a fixed width with a float-left property should resolve this issue and correctly position the map on the right side automatically.

Answer 9

Answer №5

To position both elements side by side, use the float property with a value of left. Specify percentage widths for better control over element widths, such as width: 50%;

Here's a simple example:

Check out this demo - Demo Link!

Update - Updated demo with more text - Updated Demo Link!

HTML

<div id="text"></div>
<iframe></iframe>

CSS

#text {
    width: 50%;
    height: 200px;
    background: #CCC;
    float: left;
    min-width: 200px;
}
iframe {
    width: 200px;
    height: 200px;
    background: #333;
    border: none;
}

Answer 10

To position both elements side by side, use the float property with a value of left. Specify percentage widths for better control over element widths, such as width: 50%;

Here's a simple example:

Check out this demo - Demo Link!

Update - Updated demo with more text - Updated Demo Link!

HTML

<div id="text"></div>
<iframe></iframe>

CSS

#text {
    width: 50%;
    height: 200px;
    background: #CCC;
    float: left;
    min-width: 200px;
}
iframe {
    width: 200px;
    height: 200px;
    background: #333;
    border: none;
}

Position the div to float on the right side and then have it drop below on smaller screens

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unable to modify the focus outline for .custom-control-input within Bootstrap 4

What is the method for extracting JavaScript code as data from a script tag?

What is the best way to align a search box within a Bootstrap navbar?

Is there a way to set the size of my unique carousel design?

What causes the width of input fields to increase as more inputs are added in flexbox?

Ways to position a single item in the middle of a multi-column layout

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

Text within cells is not wrapping onto a new line in an HTML table

`Implementing a dynamic list with image and button using Bootstrap 5`

What is the best way to maintain scrollbars on mobile devices?

Dynamic drop-down navigation with rearranging menu

What is the best way to arrange these badges in a row?

The issue of CSS3 Grid-gap not functioning properly on iPhone devices

Can we utilize conditions to both select and deselect items using JavaScript and PHP together?

container dimensions for images

Display only distinct items in a v-for loop in Vue.js

Displaying PHP errors in input fields

Managing websites on Android when the keyboard is displayed

Expansive dropdown menu stretching across the entire width, yet the content within restricted to a width of

Blog entries alternating between a pair of distinct hues