I am trying to center align the first 2 blocks to each other (the blocks with a purple border) and have all 3 boxes top aligned. I have achieved this using display: inline-flex, but would it be possible to have the same results using just display: flex?
Fiddle
.container {
font-size: 0;
box-sizing: border-box;
}
.blocks {
display: inline-flex;
}
.blocks-left {
align-items: center;
width: 66%;
vertical-align: top;
border: 2px solid purple;
}
.blocks-right {
width: 33%;
}
.block {
width: 100%;
}
#block-1 {
background: red;
height: 100px;
}
#block-2 {
background: blue;
height: 200px;
}
#block-3 {
background: green;
height: 400px;
}
<div class="container">
<div class="blocks blocks-left">
<div id="block-1" class="block"></div>
<div id="block-2" class="block"></div>
</div>
<div class="blocks blocks-right">
<div id="block-3" class="block"></div>
</div>
</div>
If you want to change blocks to block-level display: flex, you can get the same result if you make your container a flexbox and add align-self: flex-start to the blocks-left element - see demo below:
.container {
font-size: 0;
box-sizing: border-box;
display: flex; /* added */
}
.blocks {
display: flex; /* now flex instead of inline-flex */
}
.blocks-left {
align-items: center;
align-self: flex-start; /* added */
width: 66%;
vertical-align: top;
border: 2px solid purple;
}
.blocks-right {
width: 33%;
}
.block {
width: 100%;
}
#block-1 {
background: red;
height: 100px;
}
#block-2 {
background: blue;
height: 200px;
}
#block-3 {
background: green;
height: 400px;
}
<div class="container">
<div class="blocks blocks-left">
<div id="block-1" class="block"></div>
<div id="block-2" class="block"></div>
</div>
<div class="blocks blocks-right">
<div id="block-3" class="block"></div>
</div>
</div>
Setting display: flex to the main container along with align-items: flex-start might work. Is this what you need?
.container {
font-size: 0;
box-sizing: border-box;
display: flex;
align-items: flex-start;
}
.blocks {
display: flex;
}
.blocks-left {
align-items: center;
width: 66%;
vertical-align: top;
border: 2px solid purple;
}
.blocks-right {
width: 33%;
}
.block {
width: 100%;
}
#block-1 {
background: red;
height: 100px;
}
#block-2 {
background: blue;
height: 200px;
}
#block-3 {
background: green;
height: 400px;
}
<div class="container">
<div class="blocks blocks-left">
<div id="block-1" class="block"></div>
<div id="block-2" class="block"></div>
</div>
<div class="blocks blocks-right">
<div id="block-3" class="block"></div>
</div>
</div>
Related
The colors are intended for orientation. If you enter this code like this, there should be a big red box on the left and a blue one on the right. In the red box there is a small yellow box on the left and a purple box on the right below it. I want the purple box to be the same height as the yellow one.
.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;
align-items: center;
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;
float: right;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>
If you add display flex or contents in your CSS for .left class your yellow and purple boxes would be in the same row.
.left{
display: contents;
}
Servus ChoosenOne! In your code you mixed something. I clean a little bit up.
.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left, .right {
height:30px;
}
.left {
width: 64%;
display: flex;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>
I want to make a website that would consist of 4 boxes each 50% height and width. I found code that does that, but now I struggle to add images into each box. I want each of the four divs to have a different image, and they should scale according to window size. Any help is appreciated.
Here's my codepen: https://codepen.io/alanvkarlik/pen/OJRdyRR
Here's what I would like to achieve: https://i.imgur.com/7CR7sW8.jpg
HTML:
<div class="container">
<div class="column"><img src="https://f4.bcbits.com/img/a0846297992_16.jpg"></div>
<div class="column">IMG 2</div>
<div class="column">IMG 3</div>
<div class="column">IMG 4</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
}
.column {
height: 25%;
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
height: 50%;
}
}
/* general styles */
body {
font-family: 'Lato', sans-serif;
font-size: 1.3em;
color: #ccc;
background: #000;
/*margin-bottom: 70px;*/
}
.column {
padding: 15px;
/*border: 1px solid #666;*/
box-sizing: border-box;
}
.column:nth-child(1) {
background: #5c9;
}
.column:nth-child(2) {
background: #fb0;
}
.column:nth-child(3) {
background: #39f;
}
.column:nth-child(4) {
background: #f33;
}
main {
max-width: 1200px;
margin: 0 auto;
}
h1,
h2 {
text-align: center;
}
Not sure if this is what you're trying to achieve but I'd do it with by setting object-fit: contain on images. I also changed a bit the way (css) you're defining the divs.
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.column {
height: 50vh;
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
box-sizing: border-box;
}
.column img {
height: 100%;
width: 100%;
object-fit: contain;
}
.column:nth-child(1) {
background: #5c9;
}
.column:nth-child(2) {
background: #fb0;
}
.column:nth-child(3) {
background: #39f;
}
.column:nth-child(4) {
background: #f33;
}
<div class="container">
<div class="column"><img src="https://f4.bcbits.com/img/a0846297992_16.jpg"></div>
<div class="column">IMG 2</div>
<div class="column">IMG 3</div>
<div class="column">IMG 4</div>
</div>
I think this is what you are looking for.
Your column img class is set to 100% width and height. I set the height to 50% and the width to auto so it detects the image size and displays it noramlly.
And i simply removed the "object-fit: cover;".
If you change your .colum img {} to the following it should be exactly what you want.
.column img {
height: 50%;
width: auto;
}
I added a snippet so you can see it working.
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.column {
height: 50vh;
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
box-sizing: border-box;
}
.column img {
height: 50%;
width: auto;
}
.column:nth-child(1) {
background: #5c9;
}
.column:nth-child(2) {
background: #fb0;
}
.column:nth-child(3) {
background: #39f;
}
.column:nth-child(4) {
background: #f33;
}
<div class="container">
<div class="column"><img src="https://f4.bcbits.com/img/a0846297992_16.jpg"></div>
<div class="column">IMG 2</div>
<div class="column">IMG 3</div>
<div class="column">IMG 4</div>
</div>
My use case is the following:
I've got a center-aligned layout with a max-width of say 360px.
Part of that layout is a container with two adjacent boxes. The right one contains an image that fills 33% width of the window. Left to it should be a text container. This text container should be aligned with the left border of the remaining center-aligned layout.
Here's a sketch of it:
body {
display: flex;
flex-direction: column;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-start {
align-items: flex-start;
}
.top {
max-width: 360px;
width: 100%;
height: 50px;
background: tomato
}
.width-2-3 {
width: 66.666%;
}
.width-1-3 {
width: 33.3333%
}
.left-content,
.right-content {
width: 100%;
height: 50px;
}
.left-content {
max-width: 240px;
background: rebeccapurple;
color: white;
}
.right-content {
background: pink;
}
<div class="col items-center">
<div class="top"></div>
</div>
<div class="row">
<div class="width-2-3 col items-end">
<div class="left-content">text</div>
</div>
<div class="width-1-3 col items-start">
<div class="right-content">[img]</div>
</div>
</div>
So basically my goal is to left align those two rows, no matter how big the window width. But after trying for some time I just can't get the math right! So any help would be greatly appreciated :)
You can consider negative margin left:
body {
display: flex;
flex-direction: column;
margin:0;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.items-center {
align-items: center;
}
.top {
max-width: 360px;
width: 100%;
height: 50px;
background: tomato
}
.width-2-3 {
width: 66.666%;
}
.width-1-3 {
width: 33.3333%
}
.left-content,
.right-content {
width: 100%;
height: 50px;
}
.left-content {
max-width: 240px;
background: rebeccapurple;
color: white;
}
.right-content {
background: pink;
}
#media (min-width:360px) {
.left-content {
margin-left:calc((150% - 360px)/2); /* 150 is 3/2*100% since the width is 2/3*/
}
.right-content {
margin-left:calc(240px + ((200% - 360px)/2) - 150%); /*200% is equal to 150% of the left element */
}
}
<div class="col items-center">
<div class="top"></div>
</div>
<div class="row">
<div class="width-2-3 col">
<div class="left-content">text</div>
</div>
<div class="width-1-3 col">
<div class="right-content">[img]</div>
</div>
</div>
Thanks to #temani-afif I came up with a solution that required only one line to change
- max-width: calc(240px);
+ max-width: calc(180px + 25%);
This way the text container is always left aligned to the top container while taking all the available space until the 33% window-width image container starts. And this works for all window sizes. Thanks for your help everyone! :)
body {
display: flex;
flex-direction: column;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-start {
align-items: flex-start;
}
.top {
max-width: 360px;
width: 100%;
height: 50px;
background: tomato
}
.width-2-3 {
width: 66.666%;
}
.width-1-3 {
width: 33.3333%
}
.left-content,
.right-content {
width: 100%;
height: 50px;
}
.left-content {
max-width: calc(180px + 25%);
background: rebeccapurple;
color: white;
}
.right-content {
background: pink;
}
<div class="col items-center">
<div class="top"></div>
</div>
<div class="row">
<div class="width-2-3 col items-end">
<div class="left-content">text</div>
</div>
<div class="width-1-3 col items-start">
<div class="right-content">[img]</div>
</div>
</div>
Why dont you get rid of .item-end and .item-start divs so you can easily control the content.
body {
display: flex;
flex-direction: column;
}
.container {
position:relative;
max-width:360px;
width:100%;
display:flex;
justify-content:center;
}
.different-width {
max-width:450px;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.items-center {
align-items: center;
}
.content-center {
justify-content:center;
}
.top {
max-width: 360px;
width: 100%;
height: 50px;
background: tomato
}
.left-content,
.right-content {
width: 100%;
height: 50px;
}
.width-2-3 {
width: 66.666%;
}
.width-1-3 {
width: 33.3333%
}
.left-content {
max-width: 240px;
background: rebeccapurple;
color: white;
}
.right-content {
background: pink;
}
<div class="col items-center">
<div class="container">
<div class="top"></div>
</div>
</div>
<div class="row content-center">
<div class="container different-width">
<div class="left-content width-1-3">text</div>
<div class="right-content width-2-3">[img]</div>
</div>
</div>
If you need to have more control over the left-content and right-content width, consider using flex-grow and flex-basis.
If you want to control the width of the second container, make another class with a different max-width value.
I would like all my element to have the same height and the separator to cover all the height. How can I achieve that please ?
The separator is pink, you can see it here with a height: 5em
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
border: 1px solid lightgrey;
}
.child1 {
width: 3em;
height: 10em;
background-color: red;
}
.child2 {
width: 3em;
height: 15em;
background-color: blue;
}
.separator {
width: 10px;
height: 5em;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1"></div>
<div class="separator"></div>
<div class="child2"></div>
</div>
</div>
If you remove the align items from container, all three columns will grow to fill the row
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
border: 1px solid lightgrey;
justify-content:center;
}
.child1 {
width: 3em;
background-color: red;
height: 10em; /* this is just to give it some height as no column currently has any height */
}
.child2 {
width: 3em;
background-color: blue;
}
.separator {
width: 10px;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1">
</div>
<div class="separator">
</div>
<div class="child2">
</div>
</div>
</div>
I have to design a 3 columns layout with these conditions:
I don't want to use percentages
I don't care if left or right columns are made with pixels
center column has to take the remaining width
elements have to be aligned vertically
I need the spans to be 100% height of their parent, to make the hover work with a full background-color
I tried using display:flex on the main container, it works well but I can't align the elements vertically. I tried using display-table: cell and vertical-align: middle but it doesn't seem to work with flex.
I developed a jsfiddle to show you what I tried: http://jsfiddle.net/v13yy2v3/4/
html, body {
height:100%;
}
#mainPercent {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPercent {
background-color: green;
float: left;
width: 5%;
height:100%;
}
#centerPercent {
background-color: blue;
text-align: center;
float: left;
width: 90%;
/* percent isn't wanted */
height:100%;
display:table;
}
#centerPercent span {
display:table-cell;
vertical-align : middle;
}
#rightPercent {
background-color: purple;
float: right;
height:100%;
width: 5%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display:flex;
/* align-items: center;
justify-content: center; items are not 100% height */
}
#leftFlex {
background-color: green;
}
#centerFlex {
background-color: blue;
text-align: center;
flex:1;
/*display:table;*/
}
#rightFlex {
background-color: purple;
}
#mainPx {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPx {
width:128px;
float:left;
background-color: green;
}
#centerPx {
background-color: blue;
text-align: center;
width:100%;
}
#rightPx {
float:right;
width : 128px;
background-color: purple;
}
<br/>
<div id="mainPercent">
<div id="leftPercent"><span>left</span>
</div>
<div id="centerPercent"><span>center</span>
</div>
<div id="rightPercent"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainFlex">
<div id="leftFlex"><span>left</span>
</div>
<div id="centerFlex"><span>center</span>
</div>
<div id="rightFlex"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainPx">
<div id="leftPx"><span>left</span>
</div>
<div id="centerPx"><span>center</span>
</div>
<div id="rightPx"><span>right</span>
</div>
</div>
You'd have to keep extending the flexbox to the child items and the spans.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display: flex;
justify-content: center;
}
.left {
background-color: green;
}
.center {
background-color: blue;
text-align: center;
flex: 1;
}
.right {
background-color: purple;
}
.child {
display: flex;
flex-direction: column;
}
span {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0.25em;
flex: 1;
}
span:hover {
background: #bada55;
}
<div id="mainFlex">
<div class=" left child"><span>left</span>
</div>
<div class="center child"><span>center</span>
</div>
<div class="right child"><span>right</span>
</div>
</div>