CSS: How to move contents of one div into another one


Tags: css

Problem :

I'm moddifiyng a webpage through css styles and I got stuck trying to join two divs.

<div class="grid_0">
 <div class="grid_0">
  <div class="wallpaper" itemtype="xyz""></div>
  <div class="wallpaper" itemtype="xyz""></div>
  <div class="wallpaper" itemtype="xyz""></div>
 </div>
 <div class="clear"></div>
 <div class="grid_0"></div>
 <div class="clear"></div>
 <div class="grid_0">
  <div class="wallpaper" itemtype="xyz""></div>
  <div class="wallpaper" itemtype="xyz""></div>
  <div class="wallpaper" itemtype="xyz""></div>
 </div>

The main container has a flex property (because I want the width of the page to flex with different display resolutions “out there”) and 100% width.

I want to merge the contents of FIRST and LAST grid_0 divs, but between them lay three other divs: two spacers and an add box (the one in the middle). Notice that the div in the middle (the add box) shares the same ID with the ones I want to merge.

Hiding the two spacers and the add box (using the :nth-child property) didn't do the trick..

Here's a “diagram” that shows the layout.

How can I move the three thumbs in the last grid_0 into the first grid_0 through CSS?

EDIT: I suspect this isn't doable through CSS.. I might need to use a java script.



Solution :

you can not manipulate the DOM with CSS, you need JS or something similar. You will need to try something like this:

$("#id-of-first-element").append( $("#id-of-last-element") );
$("#id-of-last-element").html('');

    CSS Howto..

    CSS - how to align text and an image vertically?

    How can I split code-blocks into a list?

    How to make a key shape using css?

    Bootstrap Icons not showing in published ASP.NET MVC application

    CSS-how to text-indent a nested unordered list

    How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?

    How to scroll beyond fixed position elements on a page with TOC without using JS?

    How to make the section and aside touch the footer?

    How to add html glyph markup to JQuery show/hide function

    How to remove empty space in thumbnail grid

    How to perform media queries if either statements are correct?

    How to get the “absolute” position of an html element

    HTML/CSS: How do I make an input field with 2 vertically positioned buttons next to it?

    How to hide the button keeping the position? [duplicate]

    How to apply css style to jquery effect

    CSS: how to make nth table column border thicker when column count is variable?

    How to run/debug Web Application project without cache/cookies?

    How to style a selected radio button AND include space as clickable?

    How to add bold text with CSS? [duplicate]

    How can I use jQuery and/or CSS3 to change how many unordered list items are displayed?

    How to set width of container with two div's [closed]

    What's causing my hover image not to show it's transparency? [closed]

    How to prepend a div to another div using javascript

    css3 pure: how to hover an element outside?

    How to get rid of space between buttons and content/paragraph? (CSS)

    How can I make a drop down menu without changing the width of the main menu item?

    CSS: Adding border to button on hover. How avoiding a shifting of the following elements? [duplicate]

    How to position two elements side by side using CSS

    How to spin and rotate in css?

    How to remove the margin at the top of my page