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
Little late to the party, but you can also do this:
<div style="height: 500px; width: 500px;">
<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>
<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>
For CSS Only solution 1. Either height of wrapper should be fixed or 2. height of second div should be fixed
This can be done using Flexbox.
Create a container that applies both display:flex and flex-flow:column-reverse.
/* -- Where the Magic Happens -- */
.container {
/* Setup Flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Reverse Column Order */
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse;
}
/* -- Styling Only -- */
.container > div {
background: red;
color: white;
padding: 10px;
}
.container > div:last-of-type {
background: blue;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">
second
</div>
</div>
Sources:
.move-wrap {
display: table;
table-layout: fixed; // prevent some responsive bugs
width: 100%; // set a width if u like
/* TODO: js-fallback IE7 if u like ms */
}
.move-down {
display: table-footer-group;
}
.move-up {
display: table-header-group;
}
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:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
div.BloqueTipoTabla{
display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoFila_AltoAjustadoAlContenido{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoFila_AltoRestante{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoCelda_AjustadoAlContenido{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
}
div.BloqueTipoCelda_RestanteAncho{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoCelda_RestanteAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
}
div.BloqueTipoCelda_RestanteAnchoAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoContenedor{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
}
div.BloqueTipoContenedor_VerticalmenteCentrado{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
}
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[1,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,4]
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[2,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,4]
</div>
</div>
<div class="BloqueTipoFila_AltoRestante">
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is<br />cell [3,2]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is<br />cell [3,2]
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAnchoAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This other is<br />the cell [3,4]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This other is<br />the cell [3,4]
</div>
</div>
</div>
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[4,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,4]
</div>
</div>
</div>
</body>
</html>
I have a simple way to do this.
<!-- HTML -->
<div class="wrapper">
<div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>
<div>Content that stays in place</div>
<div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>
</div>
<!-- CSS -->
.sm-hide {display:block;}
.sm-show {display:none;}
@media (max-width:598px) {
.sm-hide {display:none;}
.sm-show {display:block;}
}