For example I'm trying to stack blockes with different heights like this:
.container {
display: flex;
flex-flow: row wrap;
}
.box {
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
width: 50%;
height: 25px;
background-color: lightgreen;
}
<div class="container">
<div class="box"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
How It should be:
As far as I know, this can only be solved if you nest the two <div class="box2"> inside of a <div class="box"> wrapper
.container {
display: flex;
flex-flow: row wrap;
}
.box {
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
width: 100%;
height: 25px;
background-color: lightgreen;
}
<div class="container">
<div class="box"></div>
<div class="box">
<div class="box2"></div>
<div class="box2"></div>
</div>
</div>
Here is an example:
https://jsfiddle.net/7j6uknck/2/
Another solution (but more a hack for this case than a generic solution) is to keep all what you have and adjust margin of last element.
Of course the margin-top value will depend on ther other values
.container {
display: flex;
flex-flow: row wrap;
}
.box {
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
width: 50%;
height: 25px;
background-color: red;
}
.box2:last-child {
margin-left:auto;
margin-top:-25px;
}
<div class="container">
<div class="box"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
The other solution gave a working flexbox example for that particular scenario.
But if flexbox isn't mandatory and you don't want to change the html structure, you can make use of float for your particular layout.
.container {
}
.box {
float:left;
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
float:right;
width: 50%;
height: 25px;
background-color: lightgreen
}
<div class="container">
<div class="box"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
Related
This is sort of a two in problem.
I have a body with height: 100vh similar to how my example is in the jsFiddle (except in there I put 20vh.
I have a similar structure as this, where the innerRight container can be quite large compared to the rest of the content, and only that conatiner is to obtain it's own scroll bar. I sort of got this working in my main project, but the outer container (similar to how I displayed outer in the example) still expands past the the parents height container main. Be it 100vh, or 20vh it doesn't matter it doesn't stay within with display:flex.
.main {
height: 20vh;
}
.outer {
display: flex;
overflow: hidden;
}
.innerLeft {
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width: 100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
Can you please check the below code? Hope it will work for you.
You have to set height:100vh; in .main and set width:calc(100% - 50px); to .innerRight.
Remove height from innerleft and innerright element.
Please refer to this link: https://jsfiddle.net/yudizsolutions/9Lsyzg64/1/
body {
margin: 0;
}
.main {
height: 100vh;
}
.outer {
display: flex;
height: calc(100vh - 19px);
overflow: hidden;
}
.innerLeft {
width: 50px;
background-color: green;
}
.innerRight {
overflow: auto;
background-color: red;
width: calc(100% - 50px);
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
You need to set height to outer class.
.main {
height: 20vh;
}
.outer {
display: flex;
height: 200px;
overflow:hidden;
}
.innerLeft {
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width:100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
I want to create one flex container, which has 3 child items. However, I want two of the child items to be columns, and the third one to be a row which runs below of the the columns (like a footer). Is it possible?
This is probably best achieved by using two divs, one flex-box, and one that isn't: see below:
#wrapper {
display: flex;
background-color: lightblue;
}
#a {
background-color: lightgreen;
}
#b {
background-color: lightgray;
}
#c {
background-color: lightyellow;
}
<div id="wrapper">
<div id="a">This is a</div>
<div id="b">This is b</div>
</div>
<div id="c">This is c</div>
You can do something like THIS
.container {
display: flex;
flex-direction: column;
width: 100%;
}
.col-container {
display: flex;
flex-direction: row;
}
.col {
margin: 10px;
height: 200px;
width: 200px;
background-color: blue;
}
.row {
height: 100px;
width: 100%;
background-color: red;
}
<div class="container">
<div class="col-container">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row"></div>
</div>
I am trying to make a nested 100% screen layout but I am running into a problem where the nested container does not fill 100% of the space of the parent cell in safari, even tho the cell itself does expand to fill all the available space. If I make the subContainer the actual flex cell as well it works, but I can´t do that for practical reasons. Any ideas?
jsfiddle
HTML:
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
CSS:
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
}
#left {
background: red;
width: 50;
}
#right {
background: green;
flex: 1;
}
This is a workaround for this problem in Safari.
Since Safari seems to avoid calculation for non-flex nested containers.
Take a look to this answer
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
position: relative;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
#left {
background: red;
width: 50px;
}
#right {
background: green;
flex: 1;
}
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
I have these divs with variable content created dynamically, they are all governed by the same CSS rules. I want them to be placed in 2 columns with no space in between them, I tried using float: left/right but that still leaves space in the top and bottom.
This is a sample code (you can also see it on JSFiddle):
.posts{
width: 100%;
}
.one{
background-color: red;
height: 100px;
width: 40%;
float: left;
}
.two{
background-color: blue;
height: 120px;
width: 40%;
float: left;
}
<div class="posts">
<div class="one">
</div>
<div class="two">
</div>
<div class= "two">
</div>
<div class ="one">
</div>
</div>
So in that example, the right div boxes are fine, but they create a space between the top left box and the bottom div. I tried looking up some simple examples, but all of them suggest modifying the divs separately with overflow: hidden, and other options.
What is the best way to do it with all the divs sharing the same CSS?
Warning: If the browsers you want to support do not support columns, this will not work and may still not be the right solution for you:
What you are trying to do is create a Masonry style layout.
This should do what you want:
.container {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 0;
-moz-column-gap: 0;
-webkit-column-gap: 0;
width: 80%;
font-size: 0;
}
.container div {
display: inline-block;
width: 100%;
margin: 0;
font-size: 12px;
color: white;
}
.container .one {
height: 100px;
background-color: red;
}
.container .two {
height: 120px;
background-color: blue;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="two">two</div>
<div class="one">one</div>
</div>
Does this accomplish what you are trying to do?
.posts{
width: 100%;
}
.one,
.two {
height: 100px;
width: 40%;
float: left;
}
.one{
background-color: red;
}
.two{
background-color: blue;
}
<div class="posts">
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="one"></div>
</div>
Make your code like this,
<!DOCTYPE html>
<html>
<head>
<style>
.posts{
width: 50%;
float:left;
}
.one{
background-color: red;
height: 100px;
width:100%;
}
.two{
background-color: blue;
height: 120px;
width: 100%;
}
</style>
</head>
<body>
<div class="posts">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="posts">
<div class="two"></div>
<div class="one"></div>
</div>
</body>
</html>
Probably a fairly basic solution to this, but I can't seem to figure it out... have set up a jsfiddle to demonstrate:
http://jsfiddle.net/AxKq8/1/
HTML
<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.box {
width: 50%;
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}
I have 3 divs. What I'd like to do is have the top of the green div align with the top of the blue div.
As you can see I tried floating the first two divs left, and the third div right. That didn't work, so tried a relative positioning. Also tried using clear aswell, but it's eluding me!
Any suggestions on how to make this work?
Thanks!
Jon
Positioned the third div absolute with top:0
#box-3 {
height: 300px;
float:right;
background-color: green;
position: absolute;
top:0px;
right:0px;
}
Working CODE:JSFIDDLE
You can put the blue and red box in a container, and then a green box in another container. Float the two containers rather than the boxes.
http://jsfiddle.net/AxKq8/9/
HTML
<div class="wrapper">
<div class="container">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
</div>
<div class="container">
<div id="box-3" class="box">
</div>
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.container {
float: left;
width: 50%
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
background-color: green;
}
Give this a try: JSFiddle
HTML:
<div class="wrapper">
<div class="box-group box">
<div id="box-1" class="box2"></div>
<div id="box-2" class="box2"></div>
</div>
<div class="box-group box">
<div id="box-3" class="box2"></div>
</div>
</div>
CSS:
.wrapper{ width: 100%; }
.box { width: 50%; }
.box2 { width: 100%; }
.box-group { float: left; }
#box-1 { height: 200px; background-color: blue; }
#box-2 { height: 100px; background-color: red; }
#box-3 { height: 300px; background-color: green; }
I created columns with the .box-group class, I grouped the first two items into the first column div so the stacking and floating will appear properly.