Is it possible (without using floats) to achieve having 2 divs one below the other, while the third one fills up the space. However, the following HTML cannot be changed; and also we can't use cannot use floats.
Here is what I tried:
div{
width: 33%;
height: 100px;
background: red;
display: inline-block;
}
.left{
background: blue;
}
.right{
background: green;
}
.middle{
width: 50%;
height: 200px;
}
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
As you can see, the 2 divs on the left are pushed down. Is there a way to make them move up or another way to achieve this altogether?
JS Fiddle for anyone who wants it: https://jsfiddle.net/g6j7nLp5/2/
You can use CSS grid:
body {
display:grid;
grid-template-areas:
"left mid"
"right mid";
grid-gap:10px;
}
.left{
background: blue;
grid-area:left;
}
.right{
background: green;
grid-area:right;
}
.middle{
height: 200px;
grid-area:mid;
background: red;
}
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
As far as I'm aware, you can't do this without adding an extra container.
HTML:
<div class="wrapper">
<div class="item">Hello</div>
<div class="item">hello2</div>
<div class="item">hello3</div>
</div>
CSS:
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 500px;
max-width: 500px;
}
.item {
background: lightblue;
width: 50%;
height: 50%;
}
.item:last-child {
width: 100%;
max-width: 100%;
height: 100%;
background-color: green;
}
Check it out on codepen. Good luck!
You want to use flex if you can wrap your three DIVs with a wrapper.
See a jsfiddle
It can't be done without a container (perhaps the <body>) unless you use absolute positioning or floats. Both those might be possible for you (we don't have many details) but they would be problematic.
div{
height: 100px;
}
.wrapper {
display: flex;
width: 100%; // need for compat
}
.left{
background: blue;
flex: 0 0 20px;
}
.right{
background: green;
flex: 0 0 20px;
}
.middle{
background: red;
flex: 1 0 auto;
}
Related
I have two divs.
When resizing the browser, div 2 will go on the bottom, and div one will go on the top, something like the image below.
What I want is div 1 to go on the bottom and div 2 go on the top, basically the opposite of what it does. I know I can just put div 2 on the top in the html but I want the div 1 to stay on the left.
Current code:
.div1 {
width: 55%;
height: 80vh;
display: inline-block;
margin-right: 1.5vh;
min-width: 50vh;
}
.div2 {
width: 50vh;
height: 80vh;
display: inline-block;
}
<div class="div1">
</div>
<div class="div2">
</div>
Hope that makes sense, thx to everyone that helps in advance.
The simplest way is to make parent container as display: flex; and use flex-wrap: wrap-reverse;:
.div1 {
width: 55%;
height: 80vh;
display: inline-block;
margin-right: 1.5vh;
min-width: 50vh;
background-color: blue;
}
.div2 {
width: 50vh;
height: 80vh;
display: inline-block;
background-color: red;
}
.container
{
display: flex;
flex-wrap: wrap-reverse;
/* ignore below */
resize: both;
overflow: hidden;
border: 1px solid black;
padding: 1em;
}
<div class="container">
<div class="div1">
</div>
<div class="div2">
</div>
resize me
</div>
You can achieve this by combining two concepts: media queries and flexbox.
I've set the max-width of the screen size that the media query starts applying to 600px, but you can change this to whatever value (min or max) that you want. The switch in how the two divs render when in column-view is handled via flex-direction: column-reverse.
You'll need to wrap your divs in a parent container to apply them:
.container {
display: flex;
flex-direction: row;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
}
.div1 {
width: 55%;
height: 80vh;
display: inline-block;
margin-right: 1.5vh;
min-width: 50vh;
background: green;
}
.div2 {
width: 50vh;
height: 80vh;
display: inline-block;
background: orange;
}
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
You can read up on the two concepts I mentioned above in more detail:
media queries
flexbox
I need to center item (one) in 1/3 row space and center another item (two) in the rest of the row space (2/3).
https://jsfiddle.net/gpe9a5qb/1/
How to center items to the specific space they fit so they will NOT center depends on their size but depend on the size of the space they are signed (1/3 and 2/3)?
body {
border: 1px dotted yellow;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: brown;
}
.container {
background: red;
width: 250px;
height: 100px;
}
.box {
display: flex;
align-items: center;
justify-content: space-around;
}
.one {
background: green;
flex: 1 1 auto;
}
.two {
background: blue;
flex: 2 1 auto;
}
<div class="container">
<div class="box">
<div class="one">1/3</div>
<div class="two">2/3</div>
</div>
</div>
.one should be center inside 1/3 and .two must be center inside 2/3 space.
If i get this correctly, you are speaking about center horizontally.
the css will look like this
body
{border:1px dotted yellow;
margin:0;
padding:0;
width:100%;
height:100%;
background:brown;}
.container{
background:red;
width:250px;
height:100px;}
.box
{display:flex;
}
.box > div{
display:flex;
justify-content:center;
}
.one
{
background:green;
flex-basis:33.33%;
}
.two
{background:blue;
flex-basis:66.66%;}
Hope this helps.
What i did here, is that i put flex on the inside divs, and center their content(not the parent container, which you cant center , because they take up the space).
You were almost there. Just one modification needed:
Make each flex item a flex container with justify-content: center.
That's it.
.container {
background: red;
width: 250px;
height: 100px;
}
.box {
display: flex;
align-items: center;
/* justify-content: space-around */ /* remove; doing nothing */
}
.one {
background: green;
flex: 1 1 auto;
/* NEW */
display: flex;
justify-content: center;
}
.two {
background: blue;
flex: 2 1 auto;
/* NEW */
display: flex;
justify-content: center;
}
body {
border: 1px dotted yellow;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: brown;
}
<div class="container">
<div class="box">
<div class="one">1/3</div>
<div class="two">2/3</div>
</div>
</div>
If I understand you correctly, you want both your .one and .two elements to be vertically centered inside of .box, whilst still taking up one-third and two-thirds of the space respectively.
In order to achieve this, you simply need to ensure that .box takes up the full height of .container.
You can achieve this by either setting display: flex on .container along with flex: 1 on .box:
body {
border: 1px dotted yellow;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: brown;
}
.container {
background: red;
width: 250px;
height: 100px;
display: flex;
}
.box {
display: flex;
align-items: center;
justify-content: space-around;
flex: 1;
}
.one {
background: green;
flex: 1 1 auto;
}
.two {
background: blue;
flex: 2 1 auto;
}
<div class="container">
<div class="box">
<div class="one">1/3</div>
<div class="two">2/3</div>
</div>
</div>
Or simply by setting height: 100% on .box:
body {
border: 1px dotted yellow;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: brown;
}
.container {
background: red;
width: 250px;
height: 100px;
}
.box {
display: flex;
align-items: center;
justify-content: space-around;
height: 100%;
}
.one {
background: green;
flex: 1 1 auto;
}
.two {
background: blue;
flex: 2 1 auto;
}
<div class="container">
<div class="box">
<div class="one">1/3</div>
<div class="two">2/3</div>
</div>
</div>
This question already has answers here:
Stretch columns in two columns layout with shared header using flexbox
(2 answers)
Closed 4 years ago.
I have this layout, where a row wrap flex container has a first child with 100% width and 2 more children on the second row. The container has a fixed height and the first child (Filters block below) is collapsible (i.e. has 2 possibles values for height).
I would like the blocks on the last line to take all available height in all cases (filters block collapsed or expanded), but I can't find a solution.
I've tried various combinations of height, align-items/align-self: stretch, to no avail. Setting the pdt/list blocks height to 100% makes them effectively 100% of parent container, so they overflow due to the filters.
I know I could achieve it by making the first container flex column and throw in a second one with flex row,but I'd like to keep the current markup if possible. Any idea?
JSfiddle: https://jsfiddle.net/Lp4j6cfw/34/
HTML
<div id="lp-tag">
<div id="header">HEADER</div>
<div id="lp-ctnr">
<div id="filters" onclick="toggle()">FILTERS</div>
<div id="pdt">PDT</div>
<div id="list">LIST</div>
</div>
CSS
#lp-tag{
display: flex;
flex-flow: column nowrap;
width: 350px;
margin: auto;
border: 1px solid red;
height: 250px;
}
#header{
background: lightblue;
height: 80px;
}
#lp-ctnr{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: flex-start;
align-items: stretch;
border: 1px solid green;
flex: 1;
}
#filters{
width: 100%;
background: lightgreen;
height: 45px;
}
.close{
height: 20px !important;
}
#pdt, #list {
flex: 1;
border: 1px solid blue;
text-align: center;
align-self: stretch;
}
#pdt{
background: yellow;
}
#list{
background: pink;
}
If you are open to alternative layout methods, I'd recommend CSS-Grid
.lp-tag {
width: 250px;
margin: 1em auto;
border: 1px solid red;
height: 250px;
display: inline-grid;
grid-template-rows: auto 1fr;
}
.header {
background: lightblue;
height: 80px;
}
.header.small {
height: 40px;
}
.lp-ctnr {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: repeat(2, 1fr);
border: 1px solid green;
flex: 1;
}
.filters {
grid-column: 1 / span 2;
background: lightgreen;
height: 45px;
}
.filters.large {
height: 80px;
}
.pdt,
.list {
border: 1px solid blue;
text-align: center;
}
.pdt {
background: yellow;
}
.list {
background: pink;
}
<div class="lp-tag">
<div class="header">HEADER</div>
<div class="lp-ctnr">
<div class="filters" onclick="toggle()">FILTERS</div>
<div class="pdt">PDT</div>
<div class="list">LIST</div>
</div>
</div>
<div class="lp-tag">
<div class="header small">HEADER</div>
<div class="lp-ctnr">
<div class="filters large" onclick="toggle()">FILTERS</div>
<div class="pdt">PDT</div>
<div class="list">LIST</div>
</div>
</div>
This is the only solution I can see without an intermediary container. https://jsfiddle.net/5j38ouvs/
However, I would probably do like Nandita and add a surrounding container like here: https://jsfiddle.net/8md4oyLx/
CSS
#lp-ctnr{
display: flex;
flex-direction: column;
border: 1px solid green;
height: 550px;
width: 350px;
margin: auto;
}
#filters{
width: 100%;
background: lightgreen;
}
.close{
height: 20px !important;
}
#pdt{
flex-grow: 1;
background: yellow;
}
#list{
flex-grow: 1;
background: pink;
}
.list-container {
flex-grow: 1;
border: 1px solid blue;
text-align: center;
display: flex;
flex-direction: row;
}
HTML
<div id="lp-ctnr">
<div id="filters" onclick="toggle()">FILTERS</div>
<div class="list-container">
<div id="pdt">PDT</div>
<div id="list">LIST</div>
</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
Using a flexbox container, how can I have the first child centered and the second child at the end? I tried the following but it didn't work:
.flexbox {
display: flex;
justify-content: center;
height: 200px;
}
.box1 {
width: 100px;
}
.box2 {
width: 100px;
justify-self: end; /* does nothing */
}
div{ border: 1px solid black; } /* to help see the divs */
<div class="flexbox">
<div class="box1"></div>
<div class="box2"></div>
</div>
Justify-self only works with grid not flexbox
.flexbox {
display: grid;
grid-template-columns: auto auto;
height: 200px;
width: 500px;
background: orange;
}
.box1 {
width: 100px;
height: 200px;
background: red;
justify-self: end;
}
.box2 {
width: 100px;
justify-self: end;
height: 200px;
background: blue;
}
<div class="flexbox">
<div class="box1"></div>
<div class="box2"></div>
</div>
For your problem though, you can solve it using absolute positioning
.flexbox {
position: relative;
display: flex;
justify-content: center;
height: 200px;
width: 500px;
background: orange;
}
.box1 {
width: 100px;
height: 200px;
background: red;
}
.box2 {
position: absolute;
width: 100px;
height: 200px;
background: blue;
top: 0;
right: 0;
}
<div class="flexbox">
<div class="box1"></div>
<div class="box2"></div>
</div>
Use align-self property. It will work
.box2 {
width: 100px;
align-self: flex-end;
}
You could make a first box that's invisible and then using flex: space-between. Here's how I did it.
.flexbox {
display: flex;
justify-content: space-between;
height: 200px;
}
.flexbox-again {
display: flex;
justify-content: flex-end;
height: 200px;
}
.box0 {
width: 100px;
background: none;
}
.box1 {
width: 100px;
background: blue;
}
.box2 {
background: red;
width: 100px;
justify-self: end; // does nothing
}
<div class="flexbox">
<div class="box0"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
You can do center the first element using margin-left: 50%; and right align the second element using margin-right: 0; Remove justify-contect: center from your main div.
.flexbox {
display: flex;
height: 200px;
background: yellow;
}
.box1 {
width: 100px;
margin-left: 50%;
background: blue;
}
.box2 {
width: 100px;
margin-left: auto;
margin-right: 0;
background: green;
}
<div class="flexbox">
<div class="box1">fdgdfg</div>
<div class="box2">dfgdg</div>
</div>
I have a problem to increase the space between elements within an inline block container. I found a trick to do that but it works only for the first line...
By the way, I have n number of elements and a specific container width.
The code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: blue;
height: 300px;
width: 620px;
display: inline-block;
}
.container div + div {
margin-left: 33px;
}
.child1 {
width:200px;
height: 100px;
display:inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
The Result:
(Note: It has to support all browsers, +IE7)
Thank you very much!
Use the nth-child selector to select every three child!
https://jsfiddle.net/25x4ga0g/1/
.container div:nth-child(2n + 1) {
margin-left: 0px;
}
More about nth-child selector
Use margin-right instead of margin-left.
.container div {
margin-right: 33px;
}
.container {
background-color: blue;
height: 300px;
width: 620px;
display: inline-block;
}
.container div {
margin-right: 33px;
}
.child1 {
width: 200px;
height: 100px;
display: inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
Did you try this ?
div+div:last-of-type{
margin:0px;
}
Insert this snippet in the style part and it should be ok. It will work for the last div only .
To do this you can use something fantastic called Flexbox.
First, set the container to display: flex. Then use flex-wrap: wrap so if you add more elements, they will appear on a new row below. Also make sure to use align-content: flex-start so the elements will start from the left.
Finally add a margin-left and margin-bottom to all your child-divs so they will have space between them. Because we are use Flexbox, your problem with the margin will now be eliminated.
If you want the divs to fit perfectly in the container instead, just remove the margins of the child-divs and set the parent to justify-content: space-between.
CSS Code:
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 620px;
height: 300px;
background-color: blue;
}
.container div {
margin-right: 33px;
margin-bottom: 5px;
}
.child1 {
width: 200px;
height: 100px;
display:inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
Working Fiddle
Read more about Flexbox
An alternate solution if you don't want to use Flexbox, you could just select every third children and then set the margin-left to 0:
.container div:nth-child(3n) {
margin-left: 0;
}
Hope that helped