I want to display divs in 2 columns ordered from above to below:
I tried the following solution based on column-count which works nice if the number of divs is even but breaks if it's odd.
.container {
column-count:2;
}
.square {
box-sizing: border-box;
border: 1px solid black;
height: 200px;
padding: 5px;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
Then I tried a solution based on flex, but I can't seem to find a solution for the order:
.container {
display:flex;
flex-wrap: wrap;
}
.square {
box-sizing: border-box;
border: 1px solid black;
flex: 0 0 50%;
height: 200px;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
What I want to achieve is smoothing like this:
add display:inline-block;width:100%; to the square element:
.container {
column-count: 2;
}
.square {
border: 1px solid black;
height: 200px;
display:inline-block;
width:100%;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
Related
I have the below example that work fine for all cases except when the number of divs is 2!
The wanted behavior is to always display divs in 2 columns.
.container {
column-count: 2;
}
.square {
border: 1px solid black;
box-sizing: border-box;
height: 200px;
display:inline-block;
width:100%;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
</div>
This is the behavior I have for more than 2 divs (That I want to preserve):
.container {
column-count: 2;
}
.square {
border: 1px solid black;
box-sizing: border-box;
height: 200px;
display:inline-block;
width:100%;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
</div>
You can write a specific rule for the case of 2 divs using float:
.container {
column-count: 2;
margin:5px;
}
.square {
border: 1px solid black;
box-sizing: border-box;
height: 200px;
display:inline-block;
width:100%;
}
.square:first-child:nth-last-child(2) {
float:left;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
</div>
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
Even with display:block
.container {
column-count: 2;
margin:5px;
}
.square {
border: 1px solid black;
box-sizing: border-box;
height: 200px;
display:inline-block;
width:100%;
}
.square:first-child:nth-last-child(2) {
display:block;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
</div>
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
You put width: 100% on each of the elements, which, remember is relative to the container. Therefore it can't fit two full width elements and expands them into two rows. Removing that line puts them into two columns. 50% is the upper limit for the width otherwise it can't fit two elements in a row.
If you are trying to use css grid you have to adjust your container to allow for two columns. If you have unlimited squares but always want them to break into two columns use flexbox instead
Flexbox
.container {
display: flex;
flex-wrap: wrap;
}
.square {
width: 50%;
}
Grid
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.square {
border: 1px solid black;
box-sizing: border-box;
height: 200px;
width:100%;
}
<div class="container">
<div class="square">1</div>
<div class="square">2</div>
</div>
I'm trying to do a responsive layout, I'm not good with css so I need help.
Here is the code:
.container {
outline: 1px solid black;
max-width: 490px;
margin: 0 auto;
}
.columns {
outline: 1px solid black;
display: inline-flex;
flex-wrap: wrap;
}
.map {
background-color: cyan;
width: 150px;
min-width: 150px;
height: 150px;
min-height: 150px;
margin-right: 20px;
}
.content {
outline: 1px solid black;
background-color: lightgray;
max-width: 320px;
}
.cards {
outline: 1px solid black;
display: inline-flex;
flex-wrap: wrap;
}
.card {
background-color: pink;
outline: 1px solid black;
width: 150px;
height: 70px;
display: inline-block;
}
.card.left {
margin-right: 20px;
}
.texts {
outline: 1px solid black;
display: inline-flex;
flex-wrap: wrap;
}
.text {
background-color: gold;
outline: 1px solid black;
width: 150px;
height: 200px;
display: inline-block;
}
.text.left {
margin-right: 20px;
}
<div class="container">
<div class="columns">
<div class="map"></div>
<div class="content">
<div class="cards">
<div class="card left">card #1</div>
<div class="card">card #2</div>
<div class="card left">card #3</div>
<div class="card">card #4</div>
</div>
<div class="texts">
<div class="text left">text #1</div>
<div class="text">text #2</div>
</div>
</div>
</div>
</div>
Basically there are two rows.
The first one contains an element with fixed width and height, and on the right four cards.
The second rows contains only two elements.
Each element of this layout has width 150px.
The code shown above works partially.
The first row is ok, the second one no because the gold elements should stay aligned with the cards so when cards are on the right of el1, contents should below the cards.
It is like if there were to be a hidden element (on the left side of contents) that has the same size as el1.
Also I would like everything to always be centered because now it is only if the window width is > 490px.
This is what I'd like to have:
How can I do that?
I use Flex Grid in my Angular7 project but although the behavior is normal in the first situation, and I can locate two p-col-6 side by side, I cannot make them side by side after moving them in p-col-12. Here is the problem:
#status 1:
<style>
.p-grid {
border: 2px solid red;
padding: 10px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.p-col-6 {
box-sizing: border-box;
padding: 20px;
border: 2px solid green;
flex: 1 0 50%;
margin-bottom: 5px;
max-width: 50%;
}
</style>
<div class="p-grid">
<div class="p-col-6">
</div>
<div class="p-col-6">
</div>
<div class="p-col-6">
</div>
<div class="p-col-6">
</div>
</div>
There is no problem here. But when using this as shown below the problem occurs:
#status 2:
<style>
* {
-webkit-box-sizing: border-box;
}
.p-grid {
border: 2px solid red;
padding: 10px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.p-col-6 {
box-sizing: border-box;
padding: 20px;
border: 2px solid green;
flex: 1 0 50%;
margin-bottom: 5px;
max-width: 50%;
}
.p-col-12 {
box-sizing: border-box;
padding: 20px;
border: 2px solid green;
flex: 1 0 100%;
margin-bottom: 5px;
max-width: 100%;
}
</style>
<div class="p-grid">
<div class="p-col-12">
<div class="p-col-12">12</div>
</div>
<div class="p-col-12">
<div class="p-col-12">12</div>
</div>
<div class="p-col-12">
<div class="p-col-6">
6
</div>
<div class="p-col-6">
6
</div>
</div>
</div>
But cannot make col-6's side by side even if changing width properties. ANy idea?
The problem is the nesting you've added causes .p-col-6 to no longer be a child of the flexbox parent, .p-grid. Instead, .p-col-6 is a block level element, and will not align side-by-side as would typical row-directional flex children.
<div class="p-grid"> /* <-- flexbox parent */
<div class="p-col-12"> /* <-- flexbox child */
<div class="p-col-12">12</div>
</div>
<div class="p-col-12"> /* <-- flexbox child */
<div class="p-col-6"> /* <-- NOT a flexbox child */
6
</div>
…
</div>
</div>
I have a stack of div boxes as follows:
My goal is: Box B and C should be of the same width, and box A should be the width of B and C. The content of each box should be shown without line break. They should be arranged as in the picture. The content of box A, B and C is created dynamically.
I almost achieved this (see code at bottom) by putting these 3 boxes in an display:inline-block and setting width:50% for box B and C. This works good in some cases, but when the content of box B is too large, I get this result:
I understand the outcome, since the total width is determined by box A and box B has width: 50%. However, I would like that box B gets stretched so that no line break is needed, like this:
How can I achieve this?
This is the code that produces the image (see this jsFiddle):
<style>
.container{
display: inline-block;
text-align:center;
padding: 5px;
border:dashed red;
}
.head{
border:solid;
background-color: yellow;
padding: 30px;
}
.item{
width: 50%;
display: inline-block;
border:solid;
box-sizing: border-box;
padding: 5px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
}
</style>
<div class="container">
<div class="head">
A
</div>
<div>
<div class="item red">
B
</div><!--
--><div class="item green">
C
</div>
</div>
</div>
A minor change on structure and flexbox can do that.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
display: inline-flex;
text-align: center;
padding: 5px;
border: dashed red;
flex-wrap: wrap
}
.head {
border: solid;
background-color: yellow;
flex: 0 0 100%;
padding: 30px;
}
.item {
width: 50%;
display: inline-block;
border: solid;
box-sizing: border-box;
padding: 5px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div class="container">
<div class="head">
Very very long text
</div>
<div class="item red">
Also very very long text
</div>
<div class="item green">
C
</div>
</div>
Or...if you want the bottom divs wrapped...still flexbox
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
display: inline-flex;
text-align: center;
padding: 5px;
border: dashed red;
flex-wrap: wrap
}
.head {
border: solid;
background-color: yellow;
flex: 0 0 100%;
padding: 30px;
}
.wrap {
flex: 0 0 100%;
display: flex;
}
.item {
width: 50%;
display: inline-block;
border: solid;
box-sizing: border-box;
padding: 5px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
}
<div class="container">
<div class="head">
Very very long text
</div>
<div class="wrap">
<div class="item red">
Also very very long text
</div>
<div class="item green">
C
</div>
</div>
</div>
I wanted to create three boxes and align them properly. It would be two boxes in 1 row and a third box under the second box. The second and third box would have the height equal to the first box. You can visually see what I'm trying to do here: http://codepen.io/sibraza/pen/KMzwWR
Here is an example of what I'm trying to achieve:
Snippet:
.block {
float: left;
display: inline-block;
margin: auto;
width: 250px;
height: 200px;
border: 3px solid #73AD21;
padding: 10px;
margin-left: 300px;
margin-top: 200px;
}
.block2 {
float: left;
display: inline-block;
margin: auto;
width: 250px;
margin-top: 200px;
border: 3px solid #73AD21;
padding: 10px;
}
.block3 {
float: left;
margin: auto;
width: 250px;
height: 200px;
margin-top: 290px;
border: 3px solid #73AD21;
padding: 10px;
}
<div class="container-fluid">
<div class="row">
<div class="col-4-md text-center block">
<h2> Some Text </h2>
</div>
<div class="col-4-md text-center block2">
<h2> Other Text </h2>
</div>
<div class="col-4-md text-center block3">
<h2> More Text </h2>
</div>
</div>
</div>
Flexbox can do that with a wrapper for the right side divs
* {
box-sizing: border-box;
}
.row {
display: flex;
}
div {
border: 1px solid #73AD21;
}
.block {
height: 200px;
}
.row > div {
flex: 1;
}
.col-wrap {
display: flex;
flex-direction: column;
}
.col-wrap > div {
flex: 1;
}
<div class="container-fluid">
<div class="row">
<div class="col-4-md text-center block">
<h2> Some Text </h2>
</div>
<div class="col-wrap">
<div class="col-4-md text-center block2">
<h2> Other Text </h2>
</div>
<div class="col-4-md text-center block3">
<h2> More Text </h2>
</div>
</div>
</div>
</div>
Easiest way to sort this is to have the bigger div ont he let as is, and create a container Div for the two on the right. so the css would be somehting like this:
.block_on_the_left {
float:left;
width:50%;
}
#container_on_the_right {
float:left;
width:50%;
}
.block2 {
width:100%;
}
.block3 {
width:100%;
}
Your HTML would need to be:
<div class="block_on_the_left">
some stuff here for the left bit
</div>
<div id="container_on_the_right">
<div class=".block2">
some stuff
</div>
<div class=".block3">
some more stuff
</div>
</div>
The container will hold both the smaller divs inside it, and group them together.
Here is a simple solution using flex-box.
Hope this will help. Thanks :)
.row{
display: flex;
}
.block {
width: 250px;
height: 400px;
border: 3px solid red;
box-sizing: border-box;
}
.block2 {
width: 250px;
height: 200px;
border: 3px solid #73AD21;
box-sizing: border-box;
}
.block3 {
width: 250px;
height: 200px;
border: 3px solid blue;
box-sizing: border-box;
align-self: flex-end;
margin-left: -250px;
}
<div class="container-fluid">
<div class="row">
<div class="col-4-md text-center block">
<h2> Some Text </h2>
</div>
<div class="col-4-md text-center block2">
<h2> Other Text </h2>
</div>
<div class="col-4-md text-center block3">
<h2> More Text </h2>
</div>
</div>
</div>