say I have...
<div id="A"></div>
<div id="B"></div>
How can the end-user view div B on top of div A on their browser?
I'm trying to do this with CSS without editing the html.
You can use flex-box and order to acheive what you want
body {
display: flex;
flex-wrap:wrap;
}
#A {
width: 100%;
height:50px;
background: red;
color:white;
order: 2;
}
#B {
width: 100%;
height:50px;
background: black;
color:white;
order: 1;
}
<div id="A">A</div>
<div id="B">B</div>
You need to add display:flex; and flex-direction:column-reverse; to the parent of your two divs.
body{
display:flex;
flex-direction:column-reverse;
}
Or you can choose div's order manually with order property:
body {
display: flex;
}
#A {
order: 2;
}
#B {
order: 1;
}
Use CSS3 flex to change the positioning of flex elements and this can be done using order property,
The CSS order property specifies the order used to lay out flex items
in their flex container.
#box{
display:flex;
width:100%;
flex-direction:column;
}
.A{
order:2;
background:#111;
color:#fff;
}
.B{
order:1;
background:#111;
color:#fff;
}
<div id="box">
<div class="A">A</div>
<div class="B">B</div>
</div>
A way to do this in CSS:
The container must have display:flex attribute
Then :
#A{
order:2;
}
#B{
order:1;
}
You can also achieve this with jQuery
$('#B:parent').each(function () {
$(this).insertBefore($(this).prev('#A'));
});
It feels unclean to do it this way but here you go (no container element needed)
#A {
display: table-footer-group;
}
#B {
display: table-header-group;
}
<div id="A">A</div>
<div id="B">B</div>
Related
when I hover over "Div2", I want the hover of "Div1" to work
.Div1:hover{
background:red;
}
<div class="Div1">Hello!</div>
<div class="Div2">Open hello!</div>
You can use display: flex on the container, then change the rendering order. Then you can hover on div2 and highlight div1.
.container {
display: flex;
flex-wrap: wrap;
}
.div1, .div2 {
flex: 0 0 100%;
}
.div1 { order: 1; }
.div2 { order: 2; }
.div2:hover ~ .div1 {
background-color: red;
}
<div class="container">
<div class="div2">hello!</div>
<div class="div1">open hello!</div>
</div>
You can choose one class for both to make hoover works for both.
.DivHoover:hover{
background:red;
}
<div class="Div1 DivHoover">Hello!</div>
<div class="Div1 DivHoover">Open hello!</div>
I have a div with a table on it. I simply want the table to occupy the whole div, then stretch the second column and its contained inputs, so that the inputs will be as large as possible (i.e. col1+col2 = div width).
All this is inside another div, so absolute measures such as 100% aren't an option.
In the following code, if I remove the flex-grow:1 from tr, nothing changes. But if then I remove the display:flex from t, the table won't stretch to the div anymore. Isn't it strange? I have tried including all these display:flex and flex-grow:1 down to td2, but it doesn't work, either.
And please don't tell me to avoid tables in formatting, because no other option works in all cases like tables do.
#d {
background-color:blue;
padding:2px;
width:400px;
display:flex;
}
#t {
background-color:red;
padding:2px;
flex-grow:1;
display:flex;
}
#tr {
background-color:green;
flex-grow:1;
}
<div id='d'>
<table id='t'>
<tr id='tr'>
<td id='td1'>col1</td>
<td id='td2'><input type='text'></td>
</tr>
</table>
</div>
Looks like flexbox and table hate each other. So I found out I should be using CSS Grid Layout instead.
.wrapper {
max-width:500px;
margin:0 auto;
}
.wrapper > div {
padding:2px;
margin:2px;
background-color: orange;
}
.wrapper {
display:grid;
grid-gap:2px;
grid-template-columns:auto 1fr;
background-color: green;
}
.one {
text-align:right;
align-self:center;
grid-column:1;
grid-row:1;
}
.two {
grid-column:2;
grid-row:1;
}
.three {
text-align:right;
align-self:center;
grid-column:1;
grid-row:2;
}
.four {
grid-column:2;
grid-row:2;
}
.wrapper > div > input {
width:100%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="one">Line 1, with long text:</div>
<div class="two"><input></div>
<div class="three">Line 2:</div>
<div class="four"><input></div>
</div>
I have a nav element with 3 child divs, with widths 25%, 50%, and 25% respectively, also flexbox order 1,2 and 3 respectively. In mobile view, I want to shift the second element down to next row taking full-width and first and third to stay in the first row consuming 50% widths each. I changed the second element's order to 3 and width 100%, also third element's order to 2 and 50% width. However, it is still not working as expected. Is it possible to achieve something like that using flexbox?
I have included a sample code
<nav>
<div class="a">
A
</div>
<div class="b">
B
</div>
<div class="c">
C
</div>
</nav>
and CSS
nav{
display:flex;
flex-direction:row;
}
.a,.b,.c{
border:1px solid blue;
text-align: center;
}
.a{
width:25%;
order:1;
}
.b{
width:50%;
order:2;
}
.c{
width:25%;
order:3;
}
#media screen and (max-width: 400px){
.a{
width:50%;
}
.b{
width:100%;
order:3;
}
.c{
width:50%;
order:2;
}
}
or use the fiddle
basically this is what I'm trying to achieve.
default view
on mobile
I updated your fiddle: https://jsfiddle.net/s9v926g9/1/
There are 2 things you need to add:
Add flex-wrap: wrap; to the nav element
This will make the elements wrap to a next line, instead of spacing themselves out over the available width.
Set the box sizing
Adding
*{
box-sizing: border-box;
}
to your css will make sure the borders are not messing up your flex-wrap.
You need to set flex-wrap: wrap on flex container and then you can just change order on mobile size and set flex: 0 0 100% on b element. Demo
nav {
display: flex;
flex-wrap: wrap;
}
.a, .b, .c {
border: 1px solid blue;
text-align: center;
}
.a, .c {
flex: 1;
}
.b {
flex: 2;
}
#media screen and (max-width: 400px) {
.b {
order: 2;
flex: 0 0 100%;
}
}
<nav>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</nav>
if I have:
<div>A</div>
<div>B</div>
<div>C</div>
is there a way for the div's to appear this way when the page loads?
C
A
B
it doesnt matter the method
You can use display:flex and order to rearrange how the divs look on the dom
check this snippet
.container {
display: flex;
flex-direction: column;
}
div:nth-child(1) {
order: 2;
}
div:nth-child(2) {
order: 3;
}
div:nth-child(3) {
order: 1;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Hope it helps
you can use css3 flex-box concept to achieve this
give display:flex for the parent container and give order property to the child element
#one{
background-color:red;
width:300px;
height:100px;
order:2;
}
#two{
background-color:green;
width:300px;
height:100px;
order:3;
}
#three{
background-color:orange;
width:300px;
height:100px;
order:1;
}
#parent{
display: flex;
}
<div id="parent">
<div id="one">A</div>
<div id="two">B</div>
<div id="three">C</div>
</div>
I'm looking for a way to create a CSS layout where the left column is fluid and the right column is fixed using the exact markup below. I don't think it is possible. Am I wrong?
<div class="wrapper">
<div class="left">Fluid Column</div>
<div class="right">Fixed Column</div>
</div>
Yep. Try this:
<div id="wrapper">
<div id="left">
<div id="content">
...
</div>
</div>
<div id="right">
...
</div>
</div>
CSS:
#wrapper { width: 900px; }
#left { float: left; width: 100%; margin: 0 -100px 0 0 ; }
#content { margin: 0 100px 0 0; }
#right { float: right; width: 100px; }
Note: Remove wrapper if you want the width to be 100%.
It's probably not a viable solution at this point in time but if you are not adverse to using bleeding-edge CSS you could also use the CSS3 flex box module. Using vendor specific prefixes, it is currently supported in Firefox, and Webkit based browsers such as Safari and Google Chrome.
<!doctype html>
<style>
.wrapper {
display: -moz-box;
display: -webkit-box;
display: flexbox;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
flex-direction: lr; /* box-orient has been renamed in the most recent version of the draft */
width: 100%;
}
.right {
width:150px;
background-color: #eee;
}
.left {
-moz-box-flex: 1;
-webkit-box-flex: 1;
flex-box: 1; /* box-flex has been renamed flex-box */
}
</style>
<div class="wrapper">
<div class="left">Fluid Column</div>
<div class="right">Fixed Column</div>
</div>
For the sake of semantics, you might want to rename .left and .right to something like .content and .sidebar
Give this a shot:
* { padding:0px; margin:0px; }
.wrapper {
position:absolute;
width:100%;
height:100%;
}
.left {
position:absolute;
top:0; bottom:0;
left:0; right:150px;
background-color:#999999;
}
.right {
position:absolute;
top:0; bottom:0;
right:0;
width:150px;
background-color:#AAAAAA;
}