Is it possible to stack right side div over the left sided div in mobile view with the help of CSS? The default behavior is the right sided div floats under the left sided div.
CSS:
.left {
position: relative;
float: left;
background: #F48024;
width:576px;
height: 324px;
}
.right {
position: relative;
float: left;
background: #EFF0F1;
width:576px;
height: 324px;
}
HTML:
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
Trying to achieve 3rd layout of this diagram.
You can achieve this by using flex box! Change Your css to this:
.main{
display:flex;
flex-wrap:wrap;
justify-content: center;
}
.left {
position: relative;
background: #F48024;
width:576px;
height: 324px;
}
.right {
position: relative;
background: #EFF0F1;
width:576px;
height: 324px;
}
#media screen and (min-width:1152px){
.main {
justify-content: space-between;
}
.left {
order:2;
}
.right {
order:1;
}
}
order property determines which element stacks first. You can read more about flex box here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This may serve as a quick fix:
#media screen and (max-width:480px){
.main {
display: flex;
flex-direction: column-reverse;
}
}
Note:
You may have to use other flex related css props too to align and justify the content with in the div props like justify-content and align-items.
But if you have many div elements, all of them will be reversed.
div-n
...
div-2
div-1
#media only screen and (max-width: 1000px) and (min-width: 200px) {
.div {
margin-top: 200px;
position: absolute;
display:flex;
flex-direction: column-reverse;
}
}
You can do something like this using media query:
div {
width: 500px;
height: 200px;
}
.left {
float: left;
background-color: yellow;
}
.right {
float: left;
background-color: green;
}
#media only screen and (max-width: 1000px) {
.left {
margin-top: 200px;
position: absolute;
}
.right {
position: absolute;
}
}
<div class="left">left</div>
<div class="right">right</div>
Related
I'm creating a section on a page that has a centered title in a DIV the same height as the information next to it. I need the background on the outer wrapper so they look as one no matter the orientation. The title doesn't need to be the same height as the information on mobile.
I've used a mess of wrappers which sort of works but this breaks easily and doesn't always scale properly.
.wrap {
width: 100%;
display: table;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col1 {
width: 50%;
float: left;
height: 500px;
}
#media only screen and (max-width: 500px) {
.col1 {
width: 100%;
float: left;
height: 50px;
}
}
.col2 {
width: 50%;
float: left;
height: 500px;
}
#media only screen and (max-width: 500px) {
.col2 {
width: 100%;
float: left;
height: 100px;
}
}
.outer {
width: 100%;
height: 500px;
position: relative;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
}
<div class="wrap">
<div class="col1">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col2">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>
The aim is for the desktop version to look like this;
And for the mobile version to look like this;
There must be a better way to do this, even if I wrapped another DIV inside the title one for the heading? The borders are just to show each col. Any answers would be appreciated. This question follows on from a previous one but isn't asking the same so I've created a new question.
use display flex for your wrap tag instead, and control the flex direction property (default is row):
.wrap {
display: flex;
#media only screen and (max-width: 500px) {
flex-direction: column;
}
}
for the child div you can set flex-grow: 1; to distribute equally the spaces, plus you can easily center your content with display flex as well like:
.child {
flex-grow: 1; // this property is set on display flex element's child
// below how to center content with display flex
display: flex;
justify-content: center;
align-items: center;
}
more about it: css flex
you can check an example here at codepen
I can't seem to get the red div stack on top of the blue when the width gets to the specified width from the #media declaration.
.descleft {
background-color:blue;
float: right;
width: 250px;
min-height: 50px;
}
.descright {
overflow: hidden;
min-height: 50px;
background-color:red;
}
#media (max-width:700px) {
.descleft{
width:100%;
}
.descright{
width:100%;
}
}
<div class="descleft"></div>
<div class="descright"></div>
http://jsfiddle.net/SpSjL/6580/
I think the easiest way to accomplish what you want is using flexbox. Here is how I was able to implement it:
HTML
<div class="container">
<div class="descright"></div>
<div class="descleft"></div>
</div>
CSS
.container {
display: flex;
}
.descleft {
background-color:blue;
width: 250px;
min-height: 50px;
}
.descright {
overflow: hidden;
min-height: 50px;
background-color:red;
width: 100%;
}
#media (max-width:700px) {
.container {
flex-direction: column;
}
.descleft {
width:100%;
}
.descright {
width:100%;
}
}
You can find a working demo here: http://jsfiddle.net/SpSjL/6631/
For more information about flexbox check this MDN links: https://developer.mozilla.org/en-US/docs/Glossary/Flexbox
I'd like to achieve the following with CSS only (left is mobile layout, right is desktop after breakpoint):
The challenge here obviously is that from a float point of view the element order changes: on mobile the green item is the second, but on desktop it's the first.
Is this possible to achieve with pure CSS? Possibility would be flex-box but I don't have enough experience to recreate this layout.
#container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 400px; /* 1 */
}
.box {
width: 50%;
}
.box1 {
background-color: lightgreen;
height: 400px;
}
.box2 {
background-color: orangered;
height: 200px;
}
.box3 {
background-color: aqua;
height: 200px;
}
#media (max-width: 600px) {
#container { height: auto; } /* 2 */
.box { width: 100%; }
.box2 { order: -1; } /* 3 */
}
/* purely decorative styles */
.box {
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
* { box-sizing: border-box; }
<div id="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
Notes:
Without a fixed height in a column wrap container, flex items don't know where to wrap. So, for your larger screen, define a height which forces the second item to a new column.
Now you're in a mobile layout and wrapping is no longer necessary. The container needs to be twice the height of the desktop layout. Release the height.
Tell the red box to re-position itself first on the list. (The initial order value for flex items is 0.)
Yes you can do this if you can set fixed height on flex-container. You just need to use flex-direction: column and flex-wrap: wrap and then change order with media-queries.
.content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.a {
height: 200px;
background: #00FF02;
}
.b {
height: 100px;
background: red;
}
.c {
height: 100px;
background: blue;
}
#media(min-width:768px) {
.content {
height: 200px;
}
.content > div {
width: 50%;
}
}
#media(max-width:768px) {
.b {
order: -1;
}
}
<div class="content">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
There is also no-flex solution, fiddle (just replace media-query min-width with whatever breakpoint you consider phone width ends):
HTML:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
CSS:
div {
width: 50%;
}
.div1 {
background-color: red;
float: right;
height: 200px;
}
.div2 {
background-color: green;
float: left;
height: 400px;
}
.div3 {
background-color: blue;
float: right;
height: 200px;
}
#media (max-width: 500px) {
.div1, .div2, .div3 { width: 100%;}
}
Hi I have a navigation div, which has a div on the bottom of it. This div has two other divs "DIV 1" and "DIV 2" (see on picture). Now I the navigation is closed on a tablet device, so I would show the second div which contains float: right over the first div which contains float: left, like in the picture. How can I do this? Now the first div is over the second. Thanks.
You can do this with Flexbox and media queries just change order of second element to order: -1 , here is Fiddle
.nav {
height: 200px;
display: flex;
align-items: flex-end;
border: 1px solid black;
}
.one {
background: #5B9BD5;
}
.two {
background: #FF0000;
}
.div {
flex: 1;
padding: 10px 0;
border: 1px solid black;
margin: 5px;
box-sizing: border-box;
}
#media(max-width: 480px) {
.nav {
flex-direction: column;
align-items: normal;
justify-content: flex-end;
}
.div {
flex: 0 0 50px;
}
.two {
order: -1;
}
}
<div class="nav">
<div class="div one">1</div>
<div class="div two">2</div>
</div>
You can use media queries for that purpose.
You can just manipulate your divs at some point to change their style.
#media (max-width: 600px) {
#someElement {
float: left;
}
}
You can try the following, along with media queries to remove the float at 800px:
JSFiddle: https://jsfiddle.net/7ws3m9Lx/
CSS:
.div1,.div2 { width: 50%; }
.div1 { float: left; }
.div2 { float: right; }
#media screen and (min-width: 0) and (max-width: 800px){
.div1,.div2 { float: none; width: 100%; }
}
HTML:
<div class="parent">
<div class="div2">DIV2</div>
<div class="div1">DIV1</div>
</div>
I have 2 div's in parent wrapper. I would like to make the following:
these 2 divs share 100% space in width, so there is no gap between them, everything is red color.
When you scale the wrapper down, div b falls into new line below div a (this behaves as it should), but in this case I want both divs to be 100% width, so they make 2 lines of red color.
Is it possible to do this just with css (no tables!) and no additional elements?
Making wrapper background color red to compensate for this is not the solution.
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
http://jsfiddle.net/EAkLb/75/
Just change the CSS to width:50%; for both a and b, add a media query to set them to 100% at smaller viewports.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a{
float: left;
background-color: red;
text-align: left;
width:50%;
height:30px;
}
.b{
float: right;
background-color: red;
text-align: right;
width:50%;
height:30px;
}
#media screen and (max-width: 500px) {
.a, .b {
width: 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
Flexbox can do that:
JsFiddle demo
.wrapper {
position: relative;
max-width: 400px;
height: 30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.a {
background-color: red;
text-align: left;
flex: 0 0 110px;
height: 30px;
}
.b {
background-color: red;
text-align: right;
flex: 0 0 120px;
height: 30px;
}
#media screen and (max-width: 400px) {
.a,
.b {
flex: 1 0 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
Consider you are using CSS media queries, you can simply change the width and the css float property of your divs. It's not the modern way, but it's work.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a, .b {
float: left;
width: 50%;
}
.a{
background-color: red;
text-align: left;
height:30px;
}
.b{
background-color: red;
text-align: right;
height:30px;
}
#media screen and ( max-width: 400px ) {
.a, .b {
float: none;
width: 100%;
}
}
The beauty of flex is that mediaqueries can often be avoided.
Using a combination of flex with min-width and flex-wrap we can achieve the desired effect without a media query.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
}
.child {
flex-grow: 1;
background-color: red;
height:30px;
}
.a{
min-width:110px;
text-align: left;
}
.b{
min-width:120px;
text-align: right;
}
<div class="wrapper">
<div class="child a">left</div>
<div class="child b">right</div>
</div>
Here's a JSFiddle.
My solution uses also Flex - but I use a min-width attr. to tell the flex container when to switch to 2 lines
.wrapper{
position: relative;
max-width: 100%;
height:30px;
background-color: #fff;
display: flex;
flex-wrap:wrap ;
}
.a,.b {
background-color: red;
width:50%;
min-width:130px;
height:30px;
flex-grow:1;
flex-shrink:0;
flex-basis:50%
}
.b {
background-color:green;
text-align:right;
}
fiddle
use the slider to make the window smaller
I used green as back for the 'b' element