This question already has answers here:
CSS responsive float left and right (change which div goes on top)?
(2 answers)
Closed 7 years ago.
I have two div's that are side by side in a wider screen (say 1000 px)
Box 1 is the left of Box 2
When I change the screen size to say 330px, I want Box 2 ABOVE Box 1.
I have no issues getting BOX 1 ABOVE Box 2, but not the reverse.
I'm hoping this can be done with css - I can make it happen with javascript.
As you are saying about responsiveness, #media queries come into play. I don't fishing care about Old IE versions, so I am using FlexBox for your solution. We can have reverse and orders in flexbox.
Snippet
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
div {border: 1px solid #ccc; max-width: 100px;}
div div {width: 50px; height: 50px; line-height: 50px; text-align: center;}
#media (max-width: 330px) {
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
Another option for older browsers with just using float in a cunning way.
Snippet with Floats
div {border: 1px solid #ccc; max-width: 104px;}
div div {width: 50px; height: 50px; line-height: 50px; text-align: center;}
div {overflow: hidden;}
div div {float: left;}
div div:first-child {float: right;}
#media (max-width: 330px) {
div div {float: none;}
}
<div class="container">
<div class="item">2</div>
<div class="item">1</div>
</div>
You can use a media query to modify CSS rules under certain screen width:
div {
width: 130px;
background-color: #7A9;
margin: 10px;
display: inline-block;
}
#media screen and (min-width: 331px) {
#box1 {
float: left;
}
#box2 {
float: right;
}
}
<div id="box2">BOX 2</div>
<div id="box1">BOX 1</div>
Related
If you look at this page with Internet Explorer 11, you can see images aspect ratio is uncorrect - image is vertically stretched. IE 11 stubbornly displays image's original height. All other browsers (latest Chrome, Firefox and Edge versions) displaying correctly. Why this css code not working with IE 11?
html:
<section class="content-6 sec-content">
<div class="container sec-right">
<div>
<img src="https://eoy.ee/oosorr/images/8.jpg" alt="Nõmmemännik" width="1280" height="853" />
</div>
</div>
</section>
css:
img {
width:100%;
height:auto;
max-width: 100%;
}
.sec-content{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sec-content > div{
padding-bottom:50px;
display:-ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction:row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sec-right{
-ms-flex-pack: end;
justify-content: flex-end;
}
.sec-right > div{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
padding:35px 45px;
position: relative;
z-index: 10;
width: 90%;
}
.sec-right > div::before {
background: rgba(0,0,0,0.4);
content:" ";
top:0;
bottom:0;
width:3000px;
position: absolute;
z-index: -100;
}
.sec-right > div::before {
left: 0;
}
According to this discussion there seems to be a bug with IE flexbox implementation, that can be worked around with adding the following code to your image css styles:
img {
...
min-height: 1px;
}
Piotr link was very useful - min-height:1px solved the problem. it didn't help then i added it to img, but to .sec-content > div. and i removed flexbox properties a little. final css:
.sec-content{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end;
}
.sec-content > div{
padding-bottom:50px;
display:-ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction:row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
min-height: 1px;
}
.sec-right{
-ms-flex-pack: end;
justify-content: flex-end;
}
.sec-right > div{
padding:35px 45px;
position: relative;
z-index: 10;
width: 100%;
}
How I can achieve vertical alignment if one of my image has less height then other. Also rearrange content for < 768px devices.
Codeply
.order-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.order-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 250px;
}
.order-image {
padding-bottom: 50px;
}
#media (max-width: 768px) {
.order-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
min-width: 450px;
}
.order-flex {
flex-direction: column;
}
}
This is the top part of the layout. I think you can figure out the bottom part yourself now.
.order-flex {
display: flex;
}
.order-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
min-height: 200px;
max-width: 120px;
}
.order-image {
padding-bottom: 50px;
}
.txt {
text-transform: uppercase;
}
<div class="order-flex">
<div class="order-wrapper">
<img src="http://placehold.it/100x50" />
<div class="txt">text</div>
</div>
<div class="order-wrapper">
<img src="http://placehold.it/100" />
<div class="txt">text</div>
</div>
<div class="order-wrapper">
<img src="http://placehold.it/100" />
<div class="txt">text</div>
</div>
</div>
I successfully created a nested flexbox layout for my pedigree. But how do I draw lines inbetween? This is possible using CSS3, see http://thecodeplayer.com/walkthrough/css3-family-tree But this example doesn't explain anything and I cannot get it to work with my code.
I am not sure if my approach makes sense: it's flexbox columns inside flex-items that are aligned in a row.
pedigree {
border: 1px solid green;
/* flex container */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
individual:nth-child(2n) {
background-color: #FFE6E6;
}
individual {
margin: 5px;
border: 1px solid red;
background-color: #E6E6FF;
/* flex item */
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
individual:before, .individual:after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
individual:after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
gen0, gen1, gen2, gen3 {
border: 1px solid blue;
/* flex item */
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: stretch;
/* flex container */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
justify-content: space-around;
}
ind_name, ind_birth, ind_marriage, ind_death {
border:none;
display:block;
}
ind_name {
font-weight: bold;
}
ind_birth:before {
content: "* ";
}
ind_marriage:before {
content: "oo ";
}
ind_death:before {
content: "+ ";
}
<html>
<body>
<pedigree>
<gen0>
<individual>
<ind_num>1</ind_num>
<ind_name>Individual</ind_name>
<ind_birth>19 Nov</ind_birth>
</individual>
</gen0>
<gen1>
<individual>
<ind_num>2</ind_num>
<ind_name>Father</ind_name>
<ind_birth>1 Mar</ind_birth>
</individual>
<individual>
<ind_num>3</ind_num>
<ind_name>Mother</ind_name>
<ind_birth>10 Sep</ind_birth>
</individual>
</gen1>
<gen2>
<individual>
<ind_num>4</ind_num>
<ind_name>Grandfather</ind_name>
<ind_birth>1 Nov</ind_birth>
</individual>
<individual>
<ind_num>5</ind_num>
<ind_name>Grandmother</ind_name>
<ind_birth>9 Feb</ind_birth>
</individual>
<individual>
<ind_num>6</ind_num>
<ind_name>Grandfather</ind_name>
<ind_birth>5 Jan</ind_birth>
</individual>
<individual>
<ind_num>7</ind_num>
<ind_name>Grandmother</ind_name>
<ind_birth>15 Nov</ind_birth>
</individual>
</gen2>
</pedigree>
</body>
</html>
I think the right approach here would be to use svg instead of the flexbox items you are using. That still gives you a lot of control on the display (via CSS) and animations/events, while allowing you indeed to draw the lines. Accessibility might be more complex to get right, though.
This is a simple question. I must be just missing the answer. I have a flex container with one flex item in it. I want the flex item to be 90% wide and centered vertically and horizontally. I just can't get it to be 90% wide. I am puzzled. Here's my code:
<div class="" id="popupContainer">
<div class="flex-item-popup" id="popup">
</div>
</div>
#popupContainer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
}
#popup {
width: 90%;
height: 90%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: black;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
just delete these two and it will work proprely :
flex-grow: 1; flex-basis: 200px;
Live Demo
I am trying to vertical-align 3 different inline-flex elements in a same div, but the last one doesn't fit as expected.
.container {
height: 100px;
width: 100%;
background-color: blue;
}
.container .left, .container .right {
height: 100%;
width: 30%;
}
.container .middle {
height: 100%;
width: 40%;
}
.container .left, .container .middle {
display: -webkit-inline-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
display: -moz-inline-flex;
-moz-justify-content: center;
-moz-align-items: center;
}
.container .right {
display: -webkit-inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-webkit-box-pack: center;
-webkit-flex-pack: center;
-webkit-justify-content: center;
-webkit-flex-align: center;
-webkit-align-items: center;
display: -moz-inline-flex;
-moz-justify-content: center;
-moz-align-items: center;
-moz-flex-direction: column;
}
.container .right ul {
padding: 0;
margin: 0;
}
<div class="container">
<div class="left">
<span>2014/01/21</span>
</div><div class="middle">
<button>Hello</button>
<button>Bye</button>
</div><div class="right">
<ul>
<li>Chocolate</li>
<li>Caramel</li>
<li>Watermelon</li>
</ul>
</div>
</div>
Just add vertical-align:top to .container .right :
.container .right {
display: -webkit-inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-webkit-box-pack: center;
-webkit-flex-pack: center;
-webkit-justify-content: center;
-webkit-flex-align: center;
-webkit-align-items: center;
vertical-align: top;
}
JSFiddle