Change the order of the div to be placed before the previous element

Question

Change the order of the div to be placed before the previous element

In this scenario, the third div is positioned to the right of the second div rather than the first div. There is space available to the right of the first div, but it is constrained from appearing above the second div.

How can I adjust the placement of the third div so that it aligns with the first div in the black space without:

using absolute or relative positioning
relying on specific height values (as it may vary)
changing the order of the divs (even though it's not ideal from a semantic standpoint for my unique case)

Appreciate any suggestions or solutions. Thanks!

html css

Answer 1

Answer №1

Success! This method worked perfectly for me.

#container {
        width: 300px;
        background: black;
    }

    #square1, #square2, #square3 {
        width: 200px;
        height: 40px;
        background: red;
    }

    #square2 {
        background: yellow;
    }

    #square3 {
        width: 100px;
        background: pink;
        margin: -80px 0 0 200px;
    }

Hello, I experimented with negative margins although achieving variable height might pose a challenge. Additionally, for compatibility with IE7, you may need to include position: relative; in the #square3 div style.

This solution has served its purpose for me, but your mileage may vary.

Trust this information proves helpful. Take care!

Answer 2

Success! This method worked perfectly for me.

#container {
        width: 300px;
        background: black;
    }

    #square1, #square2, #square3 {
        width: 200px;
        height: 40px;
        background: red;
    }

    #square2 {
        background: yellow;
    }

    #square3 {
        width: 100px;
        background: pink;
        margin: -80px 0 0 200px;
    }

Hello, I experimented with negative margins although achieving variable height might pose a challenge. Additionally, for compatibility with IE7, you may need to include position: relative; in the #square3 div style.

This solution has served its purpose for me, but your mileage may vary.

Trust this information proves helpful. Take care!

Answer 3

Answer №2

I encountered the same issue and discovered a surprisingly simple solution that may seem counterintuitive at first. You can float div 3 to the right and rearrange the order to be: 3,1,2. By doing this, the first action is to float right followed by floating the others left. If this seems confusing, here's the code snippet.

The necessary CSS modification:

<pre><code><div id="wrapper">
    <div id="three"></div>
    <div id="one"></div>
    <div id="two"></div>
</div>

I hope this explanation proves helpful!

Answer 4

I encountered the same issue and discovered a surprisingly simple solution that may seem counterintuitive at first. You can float div 3 to the right and rearrange the order to be: 3,1,2. By doing this, the first action is to float right followed by floating the others left. If this seems confusing, here's the code snippet.

The necessary CSS modification:

<pre><code><div id="wrapper">
    <div id="three"></div>
    <div id="one"></div>
    <div id="two"></div>
</div>

I hope this explanation proves helpful!

Answer 5

Answer №3

If you have three divs (#one, #two, #three) with a total width of 600px (3x200px), and give #three 100px, the total will be 500px - but your wrapper only allows 300px. To make it work, simply change their width to 100px:

#one, #two, #three {
    width: 100px;
    height: 40px;
    background: red;
}

Now they'll be pink :-)

Alternatively, you can change the width of the wrapper to 500px:

#wrapper {
    width: 500px;
    background: black;
}

You can find working examples here: http://jsfiddle.net/ezmilhouse/zEjaP/2/ http://jsfiddle.net/ezmilhouse/39sfD/

Answer 6

If you have three divs (#one, #two, #three) with a total width of 600px (3x200px), and give #three 100px, the total will be 500px - but your wrapper only allows 300px. To make it work, simply change their width to 100px:

#one, #two, #three {
    width: 100px;
    height: 40px;
    background: red;
}

Now they'll be pink :-)

Alternatively, you can change the width of the wrapper to 500px:

#wrapper {
    width: 500px;
    background: black;
}

You can find working examples here: http://jsfiddle.net/ezmilhouse/zEjaP/2/ http://jsfiddle.net/ezmilhouse/39sfD/

Change the order of the div to be placed before the previous element

Answer №1

Answer №2

Answer №3

Similar questions

Can you provide instructions on creating a marker like this in an unordered list?

How to set a default class for Bootstrap tabs using AngularJS

When sending a post request in MongoDB, only the object's _id is displayed

Only send file input to the server when it is changed, and disregard any other inputs until the form is submitted

I am currently working with CakePHP and am interested in learning how to expire the admin session

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

Adjust the background of the page at regular intervals

Is there a way to retrieve prName and prQty from the double array?

JavaScript is failing to pass the argument value

Is there a way to perfectly align a left-aligned drawable with a hint in a TextInputEditText and position them closer to the bottom of the text input field?

The search filter on the bootstrap card failed to display the intended image

Partially Assessed Ajax Response

Evaluate numerical values using xsl:choose function

When it comes to utilizing the method ".style.something" in JavaScript

Centering an image that is absolutely positioned within a container that is relatively positioned, horizontally

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

What is the best way to enable editing of a form when the edit button is clicked?

Issues with the styling of HTML code

The action to set the 'isRightSidebarExpanded' property is trying to target an undefined element

How to Add Catchy Titles to Your Menu Items on Silverstripe CMS?