Is there a way to move a floated element below another floated element?

jsfiddle: http://jsfiddle.net/PTSkR/195/

I'm attempting to keep the small blue box snugly in the corner, positioned below the red box and to the right of the large blue box. How can this positioning be accomplished?

CSS:

.floated{
    background-color: blue;
    color: white;
    padding: 5px;
    float: left;
    display: block;
}

.big{
    height: 300px;
}
.with-padding{
    padding: 50px;
}
.yellow{
    background-color: red;
}

HTML:

<div class='floated big'>FLOATED BIG</div>
<div class='floated with-padding yellow'>SHOULD BE NEXT TO FLOATED BIG</div>
<div class='floated'>push down</div>

Answer №1

To achieve the desired layout, my recommendation is to group the red div and the small blue div within their own container div.

After that, you can float this container div next to the big blue div.

<div class='floating big blue'>FLOATING BIG</div>
<div class="floating">
  <div class='with-padding yellow'>SHOULD BE ADJACENT TO FLOATING BIG</div>
  <div class='blue'>push down</div>
</div>

If you require the small blue div to be "shrink wrapped", you have the option to float it as well:

<div class='floating big blue'>FLOATING BIG</div>
<div class="floating">
  <div class='with-padding yellow'>SHOULD BE ADJACENT TO FLOATING BIG</div>
  <div class='floated blue'>push down</div>
</div>

http://jsfiddle.net/PTSkR/197/

Answer №2

Uncertainty surrounds your exact intention, but implementing the clear:left property to the final floated div should provide the desired outcome. Consider a snippet similar to this:

.floated:last-of-type{
    clear:left;
}

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

The pull-right function doesn't seem to function properly when applied to a button within a Bootstrap alert

Within my Bootstrap alert, I have a text and an undo button displayed. However, the button is not aligned correctly to the right, causing a misalignment with the close button on the right and the text on the left. I attempted to resolve this issue using th ...

Creating an interactive draggable box with jQuery-UI is as easy as pie

Is it possible to make the innerDropzone div draggable in the following code snippet? div.example { width: 560px; height: 750px; display: block; padding: 10px 20px; color: black; background: rgba(255, 255, 255, 0.4); -webkit-border ...

Tips for adding a class to an SVG when clicked

I want to make an SVG change color to white when clicked and its container (icon_container) to change to blue. How can I achieve this? Below is the code snippet: state = { active: false, }; click = () => { this.setState({active: !this.state.active ...

Span element not found using xpath

Recently updated the outer html and encountered a new error. It appears that the element was identified but failed to be clicked on. My script fails at the element below. I have attempted various methods to reconstruct the xpath, but the robot continues t ...

Is there a way to align the image to the left within the div contained in my header section?

I am facing an issue with positioning the logo in the header section of my website. It appears correctly on the left side for tablet and mobile versions, but on desktop, it does not align to the corner as desired. I tried adding a right margin, but I belie ...

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

Designing a toggle button interface with Material UI

Looking to add a toggle button to my page. Here is an image of what I have in mind: https://i.sstatic.net/tiQAP.png Unable to find any material-ui component or API for this specific toggle button design. Considering building a custom toggle button with CS ...

Is there a way to enhance the appearance of a TextField in JavaFX to resemble the sleek design of Android or material UI?

Is there a way to create a window like this in JavaFX? Take a look at the textfield shown in the image below... I recently came across the Jphonex framework that allows for this type of display. However, when I package it into a Jar file and try to run it ...

Tips for creating a line break within a Bootstrap progress bar when the text exceeds the width of a div

By default, the progress bar displays text inside the portion that has progress. To ensure the text does not wrap prematurely, use white-space: nowrap; How can the issue of long text within a div be resolved without using JavaScript? Is there a way to ma ...

Alter the color scheme of Fancybox's background

I am looking to create a transparent background color for Fancybox. The typical method involves using ".fancybox-skin" in CSS, however this will affect all fancyboxes and I require it to be unique. Therefore, the setting must be sent with wrapCSS. Fancyb ...

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

Eliminate a class by simply clicking on any section of the screen

I've created a dynamic "side-navigation" feature that can be hidden and shown (sliding from the right) by clicking on a specific icon. The functionality is implemented using an onclick function. Now, I'm looking to add a feature that allows the m ...

Toggle sidebar visibility with a button click

Currently, I am working on a sidebar that can collapse and expand when a button is clicked. If you wish to take a look, I have created a JSFiddle for reference: https://jsfiddle.net/4er26xwp/1/ The challenge I am facing lies here: document.getElementsByC ...

Tips for showing text beyond the confines of a <div></div> container

<div class="signup"> <div>Tenxian アカウントに必要な情報</div><br/> </div> <br/><br/><br/><br/><br/><br/> <div align="center">@2009 Tenxian &nbs ...

tips for aligning figcaption vertically to image within figure

Is there a way to vertically align the text in the figcaption with the image in this figure? Check out an example here: http://jsfiddle.net/YdATG/1/ Here is the HTML code: <section class="links"> <a href="#"> <figure class="grid-pa ...

Building a single-page app optimized for mobile viewing with Foundation framework

Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

The horizontal center alignment of text is not working properly in Bootstrap v5.0

I'm currently learning Bootstrap v5.0 and working on creating a practice webpage with it. However, I've encountered an issue where the text is not aligning center horizontally. Despite using align-items-center, the centering is not working as int ...

What is the best method to modify the hover text color in a Bootstrap navbar?

Whenever the cursor hovers over the letters, I attempted to modify their color, but unfortunately, it didn't work as expected. nav a { text-decoration: none; } .logo { height: 3rem; } .navbar-nav .nav-item .nav-link.custom:hover { color: ...

Show a directional indicator on hover in the date selection tool

I am currently using a datepicker that looks like this: https://i.sstatic.net/XsrTO.png When I hover over it, three arrows appear to change days or show the calendar. However, I would like to remove these arrows. Here is the code snippet: link: functi ...