This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 2 years ago.
I devide the div into two parts, and achieve with Flex Box in each part.
<!--My Trials-->
<body>
<div>
<div class="container1" style="display: flex;">
<div class="item1" style="flex:1;background-color: yellowgreen;">1</div>
<div class="item1" style="flex:1;background-color: lightseagreen;">2</div>
<div class="item1" style="flex:1;background-color: palevioletred">3</div>
</div>
<div class="container2" style="display: flex;">
<div class="item2" style="flex:1;background-color: lightskyblue;">4</div>
<div class="item2" style="flex:2;visibility: hidden;">5</div><!-- hide the 5th div -->
</div>
</div>
</body>
I wonder how to turn each div into a square.
And Is there anyway can achive the layout without the help of the 5th div?
.container {
display: flex;
flex-wrap: wrap;
}
.item1 {
height: 100px;
width: 33%;
background-color: lightblue;
color: black;
}
.item2 {
height: 100px;
width: 33%;
background-color: lawngreen;
color: black;
}
.item3 {
height: 100px;
width: 33%;
background-color: pink;
color: black;
}
.item4 {
height: 100px;
width: 33%;
background-color: orange;
color: black;
}
<body>
<div class="container">
<div class="item1">This is square 1</div>
<div class="item2">This is square 2</div>
<div class="item3">This is square 3</div>
<div class="item4">This is square 4</div>
</div>
</body>
The flex-wrap property allows elements to move to the next row when there is no more space on the current row. Making it completely responsive. And the width property is set to take up 33% of the view port window at all times.
Let me know if that works or if you need help with anything.
Related
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 4 months ago.
This post was edited and submitted for review 4 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I am trying to make accessible menu with button components, but for some reason when I reuse the same css it does not extend. I tried the "min-width" solution but then if I have any margin it goes out of the box (like in third example)
So example1 and example2 uses the same class but gets different result.
Why the button acts differently than div even though it has the same display method?
(Difference between 100% margin question: I am asking specifically for button "hidden" parameters that affects shrinking compared to div)
.test {
background: orange;
width: 300px;
}
.test2 {
all: unset;
margin-left: 8px;
display: flex;
justify-content: space-between;
}
.test2-with-minwidth {
min-width: 100%;
}
<div class="test">
<div class="test2">
<div class="left">hello2</div>
<div class="right">world</div>
</div>
<button class="test2">
<div class="left">hello2</div>
<div class="right">world</div>
</button>
<button class="test2 test2-with-minwidth">
<div class="left">hello2</div>
<div class="right">world</div>
</button>
</div>
It happens because you add margin to a width set to 100%.
You are probably looking for fill-available (CanIUse).
.container {
background: orange;
width: 300px;
}
.content {
margin-left: 8px;
display: flex;
justify-content: space-between;
min-width: 100%;
}
.fill-available {
min-width: unset; /* not needed without the min-width above*/
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
}
<div class="container">
<div class="content">
<div class="left">hello2</div>
<div class="right">world</div>
</div>
<div class="content fill-available">
<div class="left">hello2</div>
<div class="right">world</div>
</div>
</div>
The difference between the div and button in your snippet comes from that a div takes by default all the remaining width while a button takes its content (plus some padding) as width.
.container {
width: 300px;
border: 1px solid black;
}
.content {
background-color: orange;
}
<div class="container">
<div class="content">content</div>
<button class="content">content</button>
</div>
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 10 months ago.
<div style="height: 100%; background: red">
<div style="height: 100px; background: green">
</div>
<div style="background: blue;">
<h1>Content</h1>
</div>
</div>
How to put content of blue box to center of free plase of red block.
Parent block must have height 100%.
Like this:
Flex box would be good for this issue.
* {
margin: 0px;
padding: 0px;
}
.h {
height: 100px;
background: green;
}
.m {
background: blue;
color: white;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 100px);
}
<div class="w">
<div class="h">header</div>
<div class="m" >
<h1>Content</h1>
</div>
</div>
You should read about flex-box since it will make your life much easier when it comes to such alignments and I am sure you wont regret it. (https://www.w3schools.com/css/css3_flexbox.asp)
(Additional resource for flex-box, my personal favorite: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Please let me know if this isn't the desired outcome and I will try to fix it according to your request.
.parent {
height: 100%;
background: red;
}
.header {
height: 100px;
background-color: green;
}
.content {
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
<div class="parent">
<div class="header">
</div>
<div class="content">
<h1>Content</h1>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
There is an issue with the first three divs which contains other elements in it.
If I remove them, then it is working fine but not otherwise.
See Output Here
.results{
text-align: center;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
best solution for collect divs inside a container is using
flex (display:flex) or gird (display:gird) witch grid is not working correctly in old browser ( internet explorer)
but if you don't like to use these methods
here is a tricky way
.results{
text-align: center;
position:relative;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
float:left;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
Check the below snippet
.results{
text-align: center;
display: flex;
justify-content: center;
}
.result-box{
width: 50px;
height: 150px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
This question already has answers here:
Responsive Square Divs Cross Browser Compatible
(3 answers)
Closed 5 years ago.
I'd like these letters to sit in the row, each letter div with same height and width. This is my demo of the problem https://codepen.io/danielyaa5/pen/BZRVyo
.container {
display: flex;
flex-direction: row;
background: cyan;
width: 50%;
}
.letter {
border: 1px solid black;
text-align: center;
}
<div class="container">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
</div>
This is what I'd like to see: https://codepen.io/danielyaa5/pen/XgRYbE
Notice that divs have same height and width. Here though I manually set height and width to 50px, in my real life scenario I will not know the width because its dynamically set to a screen size percent. I was able to create a JavaScript solution but it increased the load time heavily in my actual app.
.container {
display: flex;
flex-direction: row;
background: cyan;
width: 50%;
}
.letter_wrap{
display: inline-block;
position: relative;
width: 20%;
}
.letter_wrap:after{
content: '';
display: block;
margin-top: 100%;
}
.letter {
border: 1px solid black;
display:flex;
align-items:center;
justify-content:center;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
<div class="container">
<div class="letter_wrap">
<div class="letter">A</div>
</div>
<div class="letter_wrap">
<div class="letter">B</div>
</div>
<div class="letter_wrap">
<div class="letter">C</div>
</div>
<div class="letter_wrap">
<div class="letter">D</div>
</div>
<div class="letter_wrap">
<div class="letter">E</div>
</div>
</div>
I have a random number of child div. The parent div height is known and fixed. I want the child divs' height to be the parent div's height divided by the number of child divs. (In my example there is two child divs but i can't know how many child divs there will be)
HTML
<div class="calendar-default">
<div class="calendar-plage" style="background-color: red;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
</div>
CSS
.calendar-default{
background-color: black;
position: relative;
height: 100px;
width: 100px;
}
.calendar-plage{
height: auto; /* ??? */
}
The Fiddle explain my problem best : https://jsfiddle.net/z2anpsy7/
I managed to do it with javascript but i'd like to do it with CSS only. Is it possible ?
Ps: It's inside an AngularJS app, if you know an elegant angular way of solving my problem it's also great !
You can do this with flexbox and flex-direction: column;
.calendar-default {
background-color: black;
position: relative;
height: 100px;
display: flex;
flex-flow: column wrap;
}
.calendar-plage {
flex: 1 0 auto;
}
<h2>2 children</h2>
<div class="calendar-default">
<div class="calendar-plage" style="background-color: red;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
</div>
<h2>3 children</h2>
<div class="calendar-default">
<div class="calendar-plage" style="background-color: red;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
<div class="calendar-plage" style="background-color: blue;"> </div>
</div>
To spread the childs horizontally, we use display: table-cell and to spread the childs vertically, we can use display: table-row. But display: table-row needs some content in it, which I am providing through pseudo element as you can see in the below example.
Try to add more childs, they spread and fit inside the parent container automatically.
.parent {
height: 100px;
width: 100px;
display: table;
border: 1px solid black;
}
.child {
display: table-row;
width: 100px;
background-color: tomato;
}
.child:nth-child(2n) {
background-color: beige;
}
.child::after {
content:"";
}
Working Fiddle
.calendar-default{
position: relative;
height: 100px;
width: 100px;
}
.calendar-plage{
height:50%
}
<div class="calendar-default">
<div class="calendar-plage" style="background-color: red;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
</div>