How can I reorder my divs using only CSS?

Question

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div

Answer 1

I have a much better code, made by me, it is so big, just to show both things... create a 4x4 table and vertical align more than just one cell.

It does not use any IE hack, no vertical-align:middle; at all...

It does not use for vertical centering display-table, display:table-rom; display:table-cell;

It uses the trick of a container that has two divs, one hidden (position is not the correct but makes parent have the correct variable size), one visible just after the hidden but with top:-50%; so it is mover to correct position.

See div classes that make the trick: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Please sorry for using Spanish on classes names (it is because i speak spanish and this is so tricky that if i use English i get lost).

The full code:

Vertical Centering in CSS2 - Example
(IE, FF & Chrome tested)
This is so tricky!!!

 

  

   [1,1]
  
  

   [1,2]
  
  

   [1,3]
  
  

   [1,4]
  
 
 

  

   [2,1]
  
  

   [2,2]
  
  

   [2,3]
  
  

   [2,4]
  

 

  

   

    

     

     The cell [3,1]
     

     * * * *
     

     * * * *
     

     * * * *
     

     Now is the highest one
     
     

     The cell [3,1]
     

     * * * *
     

     * * * *
     

     * * * *
     

     Now is the highest one
     
    
   
  
  

   

    

     

      This is
cell [3,2]
     
     

      This is
cell [3,2]
     
    
   
  
  

   

    

     

      This is cell [3,3]
      

      It is duplicated on source to make the trick to know its variable height
      

      First copy is hidden and second copy is visible
      

      Other cells of this row are not correctly aligned only on IE!!!
     
     

      This is cell [3,3]
      

      It is duplicated on source to make the trick to know its variable height
      

      First copy is hidden and second copy is visible
      

      Other cells of this row are not correctly aligned only on IE!!!
     
    
   
  
  

   

    

     

      This other is
the cell [3,4]
     
     

      This other is
the cell [3,4]
     
    
   
  
 
 

  

   [4,1]
  
  

   [4,2]
  
  

   [4,3]
  
  

   [4,4]