Avoid floating right elements all the way up if there are already elements floating left

I am struggling to position block 5 next to block 3 on larger screens, while maintaining the desired arrangement on smaller viewports. The blocks do not have fixed heights in my setup.

You can see my codepen for a better understanding of what I'm trying to achieve.

http://codepen.io/pirksts/pen/MyjBmP

HTML

<div class="wrap">
    <div class="block block--right">1</div>
    <div class="block block--left">2</div>
    <div class="block block--left">3 </div>
    <div class="block block--left">4</div>
    <div class="block block--right">
        5. Why won't I go next to block 3??
    </div>
</div>

CSS

.wrap {
    overflow: hidden;
    max-width: 400px;
    background-color: gray;
    padding: 20px 20px 0 20px;
}
.block {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
    padding: 20px;
}
.block--left {
    clear: left;
    float: left;
    background-color: blue;
}
.block--right {
    float: right;
    background-color: red;
}

Answer №1

My solution was to create a wrapper for the elements 2, 3, and 4, floating them together as one cohesive block. To see this in action, check out the code example at http://codepen.io/pirksts/pen/mPrzPo

Take a look at <div class="main-info">

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

Tips for resizing user-uploaded images to fit the required dimensions outlined in the design draft using CSS or JavaScript

Hey everyone! I'm facing an issue but my English isn't great. I'll do my best to explain it thoroughly, and if anything is unclear, please feel free to let me know! So here's the problem: today there's a block for users to upload p ...

Tab Focus discrepancy observed in Mozilla browser

Tab Focus issue with elements on Mozilla Firefox: <div class="editor-field"> <div> <%: Html.TextBox(model => model.AddressLine1, new { maxLength = 30, style = "width:300px", tabinde ...

Is it possible to alter the appearance of my menu when clicked on?

Is there a way to update the appearance of an active menu or submenu that is selected by the user? I would like the chosen submenu and its parent menu to have a distinct style once clicked (similar to a hover effect, but permanent). /*jQuery time*/ $(do ...

Discovering the maximum font size that can be displayed on a single line in CSS

I am working with a wrapper div tag that has the capability of adjusting its dimensions. <div class="wrapper"> <p class="inside-text">Some text</p> </div> How can I use CSS to set the font-size of inside-text to be as large as ...

Prevent vertical scrolling only on mobile devices while allowing horizontal scrolling

Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...

Ways to customize hover color of Bootstrap 5 Dropdown menu

I'm having trouble modifying the hover color for a dropdown menu using Bootstrap 5. I'm unsure of the correct method to achieve this. The desired outcome is as follows: However, at the moment it appears like this: Apologies for the oversight, h ...

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

How to apply new CSS styles to override the existing ones for an element

I have a website with custom CSS styling applied to an <A> tag, including styles for A:hover. However, I need to remove these hover effects for one specific instance of the tag. Is there a way in CSS to set a property so that it does not change? Let ...

What are the main differences between Fluid Layout and Grid?

It seems like there's some vital information I haven't come across yet. Are fluid layouts and grid layouts interchangeable? I keep hearing about this baseline concept, but I can't quite grasp its purpose. Does it serve as a guide for alignin ...

The initial render of Next.js is not properly loading the CSS files

Encountering an issue with the initial load of the mobile app version; it seems that the CSS of my component covering the page is not loading correctly on the first screen load. However, when resizing to desktop and then switching back to mobile view, the ...

"Adjusting the size of a jQuery dialog for optimal viewing on

I am currently working on designing an HTML page that is responsive for both mobile and desktop browsers. One issue I am encountering involves a jQuery dialog that I need to scale properly to fit the page. I believe the problem lies within these lines of ...

Is there a way to adjust the text color based on whether a value is negative?

I am currently developing a web application that performs addition operations on integers. Within this application, I have implemented two functions named num1() and num2() to retrieve the integers provided by the user for calculation. My objective is to m ...

HTML does not occupy the entire width of the page

I'm struggling with an issue on my website where the <html> element doesn't span full width on mobile devices. Currently, I am using Bootstrap and Jquery for my website. If you have any insights on what may be causing this problem, please ...

What could be the reason for the empty space between the upper and middle cuts?

I am working on these two web pages: http://slacklog.heroku.com/ http://slacklog.heroku.com/signup/date As you can see, there is a gap between the top and middle images as well as the bottom and middle images on both pages. Below is my HTML code: <d ...

What is the technique for enabling a mouse click in the vicinity of an element?

During a presentation on React at a conference, I witnessed the speaker introduce a feature that allowed users to click and drag a divider on the screen by simply getting close to it instead of having to click directly on it. This concept adds to usabilit ...

Modify the color of certain terms within the input field

I'm currently working on an editor for Cucumber feature files. As I write step definitions, I'd like the keywords Given, When, Then, etc. to appear in blue text, and any text between < > brackets to show up in red. Is there a way to change ...

Issues with JavaScript causing slideshow to malfunction

I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ens ...

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

Swapping stylesheets using a hyperlink - a simple guide

Currently, I am creating a website that utilizes PHP, XHTML strict, and jQuery. The main goal is to ensure the site is adaptable for mobile and desktop devices by implementing the principles of Responsive Web Design. This involves serving different stylesh ...

Position fixed iframe neglects right and bottom positioning

Here is the code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head></head> <body> <iframe src="htt ...