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>
Related
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>
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I am trying to have one div on the left and two on the right. The bottomright should always be below the topRight div. The topRight is the only div with a variable height.
I am currently trying to achieve this using flexbox als you can see in my code below.
I would like to have some directions.
.wrapper {
display: flex;
height: 100px;
}
.left {
background-color: green
}
.topRight {
background-color: yellow
}
.bottomright {
background-color: red
}
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">TopRight</div>
<div class="bottomright">Bottom</div>
</div
With a fixed height on the container, as you have in your code, you can use flex-direction: column and flex-wrap: wrap. The fixed height serves as a break point, telling flex items where to wrap.
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
.left {
flex: 0 0 100%; /* consumes full height of first column; forces siblings to wrap */
background-color: lightgreen
}
/* variable height div */
.topRight {
background-color: yellow
}
.bottomright {
flex: 1; /* consumes remaining space in column */
background-color: red
}
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">TopRight<br>variable height</div>
<div class="bottomright">Bottom</div>
</div>
On html put a div with a class called right wrapping both topRight and bottomRight and use this css on css:
.wrapper {
display: flex;
height: 100px;
}
.right {
display: flex-flow;
}
.left {
background-color: green
}
.topRight {
background-color: yellow;
height: 50px;
}
.bottomright {
background-color: red;
height: 50px;
}
I hope that helps you :)
For infos
display:grid is made for this .... very soon available for most browsers and yet for a few
A tutorial among others : https://css-tricks.com/snippets/css/complete-guide-grid/
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* any height s */
background-color: green;
}
.leftspan {
grid-row: span 2;/* if 2 rows avalaible */
}
.topRight {
background-color: yellow;
grid-column: 2 /-1
}
.bottomright {
background-color: red;
grid-column: 2 /-1
}
.bottomfull {
background-color: red;
grid-column: 1 /-1
}
<div class="wrapper">
<div class="leftspan">Left spanning 2 rows</div>
<div class="topRight">Top <br/>Right</div>
<div class="bottomright">Bottom <br/>Right</div>
</div>
<p> or did you mean ?
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">Top Right</div>
<div class="bottomfull">Bottom <br/>Right</div>
</div>
render if your browsers understand grid:
I have a responsive website with a two-column layout in large browser windows. The two-column layout is currently implemented using float. On smaller screens I'd like to have just one column. The content of the other column should be displayed between the two elements of the main column, like shown here:
<div class="two-columns">
<div class="main-column">
<div class="red-element"></div>
<div class="yellow-element"></div>
</div>
<div class="sidebar-column">
<div class="green-element"></div>
</div>
</div>
I tried using a flex-box-based approach, basically the one described in this question, but flex-basis still seems to be unsupported in Safari when flex-direction is column. Proper Safari support is a must as Safari is the main browser of my visitors.
Is there a way this can be achieved using CSS only without having to place the green element twice in my markup?
Here's a general solution using one flex container:
<div class="container">
<div class="box"> ... </div><!-- red box -->
<div class="box"> ... </div><!-- green box -->
<div class="box"> ... </div><!-- yellow box -->
</div>
Starting with small screens (for no particular reason), stack them in a column:
.container {
display: flex;
flex-direction: column;
}
.box {
height: 100px;
width: 100%;
}
Re-arrange the layout for wider screens:
#media (min-width: 800px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.box {
flex-basis: 45%;
}
}
On screens wider than 800px, the container lines the items in a row and enables wrapping. Each box is given a large enough width (flex-basis) for only two to fit on a line.
Full demo:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
background-color: #f5f5f5;
border: 1px solid #aaa;
}
.box1 { background-color: red; }
.box2 { background-color: lightgreen; }
.box3 { background-color: yellow; }
.box {
height: 100px; /* `flex-basis: 100px` would also work */
width: calc(100% - 20px);
margin: 5px 10px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
#media (min-width: 800px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.box {
flex-basis: 45%;
}
}
<div class="container">
<div class="box box1"><span>1</span></div>
<div class="box box2"><span>2</span></div>
<div class="box box3"><span>3</span></div>
</div>
jsFiddle
From your question:
...but flex-basis still seems to be unsupported in Safari when flex-direction is column
I'm not sure this is correct (caniuse.com).
However, you can always use width or height properties instead of flex-basis (more details: What are the differences between flex-basis and width?).
Using Bootstrap,
<div class="row">
<div class="col-md-8">
<div class="red-element"></div>
</div>
<div class="col-md-4">
<div class="green-element"></div>
</div>
<div class="col-md-8">
<div class="yellow-element"></div>
</div>
<div class="clearfix"></div>
</div>
This uses float methods and works on all browsers.
you should using #media via margin-top.on specific screen width (via #media), change margin-top of the green-element to -200%. and change margin-top of yellow-element to 100%.they change their position very nice :)
please see this link:
http://jsbin.com/xozeviseka/edit?html,output
You need to change some html structure so then you can do this.
*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
position:relative;
background:#EFEFEF;
border:1px solid #000;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
#media (min-width:767px) {
.main-column {
width:70%;
padding:10px;
}
.sidebar-column {
position:absolute;
right:0;
top:0;
width:30%;
padding:10px;
}
}
<div class="two-columns">
<div class="main-column">
<div class="red-element"></div>
<div class="sidebar-column">
<div class="green-element"></div>
</div>
<div class="yellow-element"></div>
</div>
</div>
Or if you don't want to change html structure you have to take another element that only show in mobile for example
*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
background: #EFEFEF;
border: 1px solid #000;
overflow: hidden;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
.hideMobile{
display:none;
}
#media (min-width:767px) {
.main-column {
width: 70%;
float: left;
padding: 10px;
}
.sidebar-column {
float: right;
width: 30%;
padding: 10px;
}
.showMobile {
display:none;
}
.hideMobile {
display:block;
}
}
<div class="two-columns">
<div class="main-column">
<div class="red-element"></div>
<div class="green-element showMobile"></div><!--only for mobile-->
<div class="yellow-element"></div>
</div>
<div class="sidebar-column hideMobile"><!--hide in mobile-->
<div class="green-element"></div>
</div>
</div>
I am working on a responsive site and came across an interesting problem. I have some divs side by side. There could be anywhere from 2 to 6 or so of them. When the screen isn't wide enough to show all the content properly, the divs stack vertically. Simple enough to do with CSS.
The problem is, I need them to be in a different order depending on the layout. This is easy to do with 2 or 3 divs (Changing divs order based on width), but significantly more challenging when you add a fourth.
I could use position: absolute; and manually set the position, however this causes the parent to shrink and not contain them properly.
To make this even more complicated, I can't use JavaScript.
Working with two columns:
(untested)
HTML:
<div id="container">
<div class="column-half column-half-2">
First div on mobile, right div on desktop
</div>
<div class="column-half column-half-1">
Second div on mobile, left div on desktop
</div>
</div>
CSS:
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 20px;
position: relative;
}
.column-half {
display: table-cell;
padding: 25px;
vertical-align: top;
width: 40%;
}
.column-half-1 {
float: left;
}
.column-half-2 {
float: right;
}
HTML, with 4 columns:
<div id="container">
<div class="column-quarter column-quarter-3">
First div on mobile, third div on desktop
</div>
<div class="column-quarter column-quarter-2">
Second div on mobile, second div on desktop
</div>
<div class="column-quarter column-quarter-1">
Third div on mobile, first div on desktop
</div>
<div class="column-quarter column-quarter-4">
Fourth div on mobile, fourth div on desktop
</div>
</div>
This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.
The solution takes into consideration all the constraints you listed:
Have a list of elements in a given order displayed as a row.
When the window is too small, change them to display in a column.
Change the order of the elements when they are displayed in a column.
Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column; }
.five { order: 1; }
.four { order: 2; }
.three { order: 3; }
.two { order: 4; }
.one { order: 5 }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
Alternatively, here is a JSFiddle demo.
You can also simply use flex-flow: column-reverse without the order property assigned to each div, if you are so inclined against verbose CSS. The same demo restrictions apply; view this demo in full screen and resize the browser window accordingly.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column-reverse; }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
It's worth pointing out that flex-flow is a shorthand property encompassing both flex-direction and flex-wrap properties.
I am working on a responsive site and came across an interesting problem. I have some divs side by side. There could be anywhere from 2 to 6 or so of them. When the screen isn't wide enough to show all the content properly, the divs stack vertically. Simple enough to do with CSS.
The problem is, I need them to be in a different order depending on the layout. This is easy to do with 2 or 3 divs (Changing divs order based on width), but significantly more challenging when you add a fourth.
I could use position: absolute; and manually set the position, however this causes the parent to shrink and not contain them properly.
To make this even more complicated, I can't use JavaScript.
Working with two columns:
(untested)
HTML:
<div id="container">
<div class="column-half column-half-2">
First div on mobile, right div on desktop
</div>
<div class="column-half column-half-1">
Second div on mobile, left div on desktop
</div>
</div>
CSS:
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 20px;
position: relative;
}
.column-half {
display: table-cell;
padding: 25px;
vertical-align: top;
width: 40%;
}
.column-half-1 {
float: left;
}
.column-half-2 {
float: right;
}
HTML, with 4 columns:
<div id="container">
<div class="column-quarter column-quarter-3">
First div on mobile, third div on desktop
</div>
<div class="column-quarter column-quarter-2">
Second div on mobile, second div on desktop
</div>
<div class="column-quarter column-quarter-1">
Third div on mobile, first div on desktop
</div>
<div class="column-quarter column-quarter-4">
Fourth div on mobile, fourth div on desktop
</div>
</div>
This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.
The solution takes into consideration all the constraints you listed:
Have a list of elements in a given order displayed as a row.
When the window is too small, change them to display in a column.
Change the order of the elements when they are displayed in a column.
Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column; }
.five { order: 1; }
.four { order: 2; }
.three { order: 3; }
.two { order: 4; }
.one { order: 5 }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
Alternatively, here is a JSFiddle demo.
You can also simply use flex-flow: column-reverse without the order property assigned to each div, if you are so inclined against verbose CSS. The same demo restrictions apply; view this demo in full screen and resize the browser window accordingly.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column-reverse; }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
It's worth pointing out that flex-flow is a shorthand property encompassing both flex-direction and flex-wrap properties.