Ways to compel divs underneath aligned divs

Question

Ways to compel divs underneath aligned divs

There are six divs numbered 1 to 6. I want divs 2, 4, and 6 to be positioned below divs 1, 3, and 5 respectively. Is it possible to achieve this layout? Sorry if my explanation is not very clear. Thank you.

http://jsfiddle.net/LkGV8/

<body>


<div class="contain">

    <div class="square">
    </div>
    <div class="rec01">
    </div>
    <div class="square">
    </div>
    <div class="rec02">
    </div>
    <div class="square">
    </div>
    <div class="rec03">
    </div>

</div>

</body>



  .contain {
    border:1px solid;
    width:639px;
    height:900px;
    background-color:;
    }

    .square {
    width:33%;
    height:50px;
    float:left;
    background-color:grey;
    }

    .rec01 {
    width:100%;
    height:50px;
    float:right;
    background-color:black;
    }

   .rec02 {
    width:100%;
    height:50px;
    float:right;
    background-color:black;
    }

    .rec03 {
    width:100%;
    height:50px;
    float:right;
    background-color:black;
    }

(add more details, don't pay attention this.)

css html

Answer 1

Answer №1

SEE IT IN ACTION

Not sure if this is the solution you are looking for.

To achieve the desired result, it is recommended to remove the float property from the .square class and instead add the display:inline-block property to it:

.square {
    width:32%;
    height:50px;
    display:inline-block;
    background-color:grey;
}

Answer 2

SEE IT IN ACTION

Not sure if this is the solution you are looking for.

To achieve the desired result, it is recommended to remove the float property from the .square class and instead add the display:inline-block property to it:

.square {
    width:32%;
    height:50px;
    display:inline-block;
    background-color:grey;
}

Answer 3

Answer №2

Have you tried rearranging the elements in the HTML code to achieve the desired layout? You can also utilize jQuery to help with this task, as outlined in this Stack Overflow post.

// While not the most elegant solution, the following code snippet should do the trick...
$( ".rec01" ).insertBefore( ".square:eq(0)" );
$( ".rec02" ).insertBefore( ".square:eq(1)" );
$( ".rec03" ).insertBefore( ".square:eq(2)" );

If possible, consider providing an image illustrating how you envision the final layout. Based on your description, it seems like you want elements 2, 4, and 6 positioned beneath elements 1, 3, and 5 respectively.

Answer 4

Have you tried rearranging the elements in the HTML code to achieve the desired layout? You can also utilize jQuery to help with this task, as outlined in this Stack Overflow post.

// While not the most elegant solution, the following code snippet should do the trick...
$( ".rec01" ).insertBefore( ".square:eq(0)" );
$( ".rec02" ).insertBefore( ".square:eq(1)" );
$( ".rec03" ).insertBefore( ".square:eq(2)" );

If possible, consider providing an image illustrating how you envision the final layout. Based on your description, it seems like you want elements 2, 4, and 6 positioned beneath elements 1, 3, and 5 respectively.

Answer 5

Answer №3

To solve this issue, consider implementing a grid system.

<h3>Method 1</h3>
<div class="grid">
    <div>
        <div class="grid">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="grid">
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</div>
<h3>Method 2</h3>
<div class="grid">
    <div>
        <div class="grid">
            <div>1</div>
            <div>3</div>
            <div>5</div>
        </div>
        <div class="grid">
            <div>2</div>
            <div>4</div>
            <div>6</div>
        </div>
    </div>
</div>

You can find the CSS and visual representation on JSFiddle.

Answer 6

To solve this issue, consider implementing a grid system.

<h3>Method 1</h3>
<div class="grid">
    <div>
        <div class="grid">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="grid">
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</div>
<h3>Method 2</h3>
<div class="grid">
    <div>
        <div class="grid">
            <div>1</div>
            <div>3</div>
            <div>5</div>
        </div>
        <div class="grid">
            <div>2</div>
            <div>4</div>
            <div>6</div>
        </div>
    </div>
</div>

You can find the CSS and visual representation on JSFiddle.

Answer 7

Answer №4

If you want to style odd and even children differently, you can utilize the :nth-child selector with this example in a JSFiddle link. Here's an illustration:

.contain div:nth-child(odd) {
position:relative;
top:0;
}
.contain div:nth-child(even) {
position:relative;
top:220px;
}

Answer 8

If you want to style odd and even children differently, you can utilize the :nth-child selector with this example in a JSFiddle link. Here's an illustration:

.contain div:nth-child(odd) {
position:relative;
top:0;
}
.contain div:nth-child(even) {
position:relative;
top:220px;
}

Ways to compel divs underneath aligned divs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Extracting a value from one HTML element and transferring it to another HTML element's attribute

Contenteditable feature dynamically styling text upon input

What is the correct way to superimpose an image with a transparent background?

Guide to creating a dynamic column layout with minimum height divs

Creating a form in PHP with the power of JavaScript, AJAX, and jQuery

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

Issue with Bootstrap 4 navbar functionality on smaller screens

defined dimension of table cell

What is the preferred method for writing `*zoom: 1;` in CSS?

Error message in Angular js: Unable to load file using XMLHttpRequest

"Animating a card to slide in from the left side upon clicking a button in a React app

What is the best way to ensure that the size and maximum length of a text input box are properly aligned?

Packaging an Angular project without the need for compiling

Material-UI: Eliminating linkOperator functionality in data-grid

Troubleshooting CSS Text Display on HTML5 Video for Mobile Devices

Use JQuery to gradually decrease the opacity of divs individually

Continuous loop of images displayed in a slideshow (HTML/JavaScript)

encountering a Zend Framework error

Background wrapper does not reach full height of page