Ajust div width to fit text after line-break - javascript

I would like to resize a div width to make it always fit the text inside even when there is a line-break.
Is there a way to modify the width to make it fit the text after a line break using javascript?
body{
width: 600px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
display: flex;
align-items: center;
justify-content: space-between;
}
#firstDiv{
border: 10px solid brown;
width: 130px;
margin: auto 20px;
}
#secondDiv{
border: 10px solid skyblue;
display: flex;
align-items: center;
margin: auto 20px;
}
#icon{
height: 24px;
width: 24px;
background-color: yellow;
margin-right: 10px;
}
#thirdDiv{
border: 5px solid yellowgreen;
width: 200px;
margin: auto 20px;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">
<span id="icon"></span>
<span id="legend">I want the #secondDiv width to fit this text</span>
</div>
<div id="thirdDiv">THIRD</div>
</div>
Edits:
The problem is because there is some blank space at the end of the #secondDiv the space between #firstDiv and #secondDiv appears not the same than between #secondDiv and #thirDiv when there is no borders.

If you instruct that element to use all of the remaining space (width:100%) the text will fill whatever space it can.
body{
width: 600px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
display: flex;
align-items: center;
justify-content: space-between;
}
#firstDiv{
border: 10px solid brown;
width: 130px;
margin: auto 20px;
}
#secondDiv{
border: 10px solid skyblue;
display: flex;
align-items: center;
margin: auto 20px;
width:100%; /* Instruct element to take 100% of the remaining space */
}
#icon{
height: 24px;
width: 24px;
background-color: yellow;
margin-right: 10px;
}
#thirdDiv{
border: 5px solid yellowgreen;
width: 200px;
margin: auto 20px;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">
<span id="icon"></span>
<span id="legend">I want the #secondDiv width to fit this text</span>
</div>
<div id="thirdDiv">THIRD</div>
</div>

I have just changed some css code to make this three div be inline and deleted display:flex
body{
width: 600px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
text-align: center;
justify-content: space-between;
}
#firstDiv{
border: 10px solid brown;
width: 130px;
margin: auto 5px;
display:inline-block;
}
#secondDiv{
border: 10px solid skyblue;
text-align: center;
margin: auto 5px;
width:auto;
display:inline-block;
}
#icon{
height: 24px;
width: 24px;
background-color: yellow;
margin-right: 10px;
}
#thirdDiv{
border: 5px solid yellowgreen;
margin: auto 5px;
display:inline-block;
width:auto;
text-align: center;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">
<span id="icon"></span>
<span id="legend">I want the #secondDiv width to fit this text</span>
</div>
<div id="thirdDiv">THIRD</div>
</div>

Related

Is there a way to verticaly occupy all the space of the flexbox container?

I want the search button to occupy all the space vertically
I have tried setting the height to 100% of the parent container but not working, I have tried setting the flex-basis to 100%/0/auto (not working). Look at my Code below and see the picture of the btn beside the input.
I want that btn to gain the height equal to the height of the input
See the Problem here
My Html:
<div className="search_subContainer">
<input
className="searchCity"
type="text"
value={value}
placeholder="Search city..."
onFocus={() => {
setFocus(!focus);
}}
onBlur={() => {
setFocus(!focus);
}}
onChange={handleChange}
/>
<button className="search_btn">
<IoSearch />
</button>
</div>
My Css:
.header .search_subContainer {
display: flex;
align-items: center;
align-content: stretch;
height: 100%;
border: 2px solid brown;
border-radius: 5px;
}
.header .searchCity {
width: 17em;
height: 100%;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header .searchCity:focus {
background-color: rgba(255, 255, 255, 0.719);
}
.search_btn {
width: 3em;
flex: 1;
height: 100%;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.search_btn:hover {
background-color: cadetblue;
}
The culprit is caused by align-items: center. Adding that to a flex container with a direction of row aligns the flex children to the center vertically.
To fix this, remove that line and the search button should align with the input element.
Fix
.search_subContainer {
display: flex;
border: 2px solid brown;
border-radius: 5px;
}
Doing this also means no need to add a height and flex: 1 to the input container, input element, and button itself.
So
.search_btn {
width: 3em;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.searchCity {
width: 17em;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Just remove align-items: center; for container and container become stretch. Then you can align the icon inside the button using flex. It's the simplest and correct way, IMHO.
There Your go:
please avoid explicit height and width
simple:
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh
}
.header{
padding: .5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 2px solid black;
}
.search-bar {
padding: 10px;
border: 1px solid lightgray;
margin-left: -5px;
}
.search-bar::placeholder {
color: black;
}
.submit-btn {
background-color: blue;
color: white;
padding: 11px;
font-size: 12px;
border-style: none;
margin-left: -5px;
}
<div class="header">
<div>
<a href='/'>tanjiro</a>
</div>
<div>
<input type="search" placeholder="Awesome" class="search-bar">
<button type="button" class="submit-btn">Search</button>
</div>
</div>

remove border bottom of last element

There is one popup. Selected installments are displayed in this pop-up. The user can choose as many installments as he/she wants. Selected installments have a border bottom. But I don't want the last item to be border bottom. I tried many ways but failed.
html
<div className="installmentinfo__container only-desktop">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
z-index: 999;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}
What i tried;
.column:last-child{
border-bottom: none;
}
.last-child{
border-bottom: none;
}
&:last-of-type {
border-bottom: none;
}
Use the last-of-type pseudo selector to remove the last item style
.column > div:last-of-type {
border-bottom:none;
}
For More Details https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
psuedo-lastchild is not the last child of a parent container rather last child of a class.so what i did was gave all three segments a same class of segments for targeting the border side of the css and id for other css that was different from each other.
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
/* position: absolute; */
background-color: white;
/* top: 210px; */
margin: auto;
/* transform: translateX(-280px); */
padding: 0.3em;
z-index: 999;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
}
.column {
display: flex;
flex-direction: column;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
/* border-bottom: 1.5px solid #d1d1d1; */
padding-bottom: 5px;
}
#installmentnumber {
float: left;
width: 50%;
}
#installmentdate {
width: 50%;
color: black !important;
}
#installmentamount {
width: 80%;
color: black !important;
font-weight: 100;
}
.segments{
border-bottom: 1.5px solid #d1d1d1;
}
.segments:last-child{
border-bottom: none;
}
<body>
<div class="installmentinfo__container only-desktop">
<div class="installmentinfo">
<div class="column">
<div class="segments" id="installmentnumber" >{(i+1).toString()}</div>
<div class="segments" id="installmentdate">{billDate}</div>
<div class="segments" id="installmentamount">{e.amount}{e.currency}</div>
</div>
</div>
</div>
</body>
In your snippet your are giving border bottom to .column class and then you are try to overwrite it with border none with :last-child selector instead you can do like this,
If your are thinking about repeating .column div then you can use following snippet
.column:not(:last-of-type){
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
In can you want to repeat .installmentinfo div multiple times and you want to give border bottom to column when .installmentinfo isn't a last div then you can use following snippet
.installmentinfo:not(:last-of-type) .column{
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}

How to expand textarea upwards and its parent divs along with it

I'm creating a chat application(React). I'm having this textbox which I need to expand vertically upwards as user types. I tried doing it with position absolute but it takes it out of the normal flow. And this does not allow the parent div to move upwards. Is there a way that this can be done? If anyone could point me in the right direction that would be great. Thanks.
Here is the codepen link.
https://codepen.io/ghewadesumit/pen/zYzRjyY
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
css
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
height: 52px;
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
We can use a Javascript ResizeObserver to tell us when the height of the input text has changed. Then we can scroll the window in such a way that the bottom of the input stays in the same position on the viewport - so the elements seem to grow upwards.
Note this snippet uses contenteditable on a div rather than a textarea as the growing/shrinking and text wrapping then happen automatically.
<style>
body {
height: 300vh;
}
.parent {
margin-top: 20vh; /* so we can see it growing not just disappearing */
background: pink;
}
.child {
background: #eeeeee;
}
</style>
<body>
<div class="parent">
Some stuff in the parent<br> here
<div class="child" contenteditable></div>
</div>
<script>
let prevH = 0;
const textArea = document.querySelector('.child');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
let h = entry.contentRect.height;
let diff = h - prevH;
if (diff != 0) {
prevH = h;
window.scroll(0, prevH);
}
}
});
resizeObserver.observe(textArea);
</script>
</body>
Don't hard code the height of class .inputbox-wrapper instead remove height property from there or put height: auto(which is default value) so that container expand when the the text-area is expanded
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
height: auto;/*Change here*/
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
The .inputbox-wrapper should have a min-height not a height if you set only a height, the container will not resize with the textbox.
On another note, if you want the textarea to expand vertically only, you can add resize: vertical; to .chat-input-box {
Textboxes can't expand their height automatically like this by default - you'll need to use a bit of Javascript.
One approach is to dynamically calculate the height of the textfield based on the number of line breaks inside it.
This example from CSS-Tricks has more details on the approach. I've implemented it on your code below.
You also need to change height to min-height on your inputbox-wrapper to allow it to expand as the textfield changes height.
let textarea = document.querySelector(".chat-input-box");
textarea.addEventListener("keyup", () => {
textarea.style.height = calcHeight(textarea.value) + "px";
});
function calcHeight(value) {
let numberOfLineBreaks = (value.match(/\n/g) || []).length;
// min-height + lines x line-height + padding + border
let newHeight = 20 + numberOfLineBreaks * 20 + 0 + 0;
// padding and border are both 0 here but have left in for reference
return newHeight;
}
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
min-height: 52px;
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>

Why backdrop filter: blur(5px) is breaking my design? [duplicate]

This question already has answers here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
Today I am facing a vey weird issue in css backdrop-filter: blur(7px);
First look at first snippet
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
/* position: absolute; */
/* width: 50%; */
bottom: 150px;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
as You are seeing there are 3 containers .
every container have a blurred container by backdrop-filter: blur(7px);
but 2nd container's blurred element is overflowing the parent .
Till now everything is working fine .
First weird thing
by positioning absolute and moving overflowing container towards bottom , it is just lying under
the 3rd containers blurred element while it should be at the top of that blurred element
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
bottom: -142px;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
to see the result please reset the bootom css attribute of .bug class according to your browser
How it's gone
I just removed the backdrop-filter property from 3 blurred container .
to see the result please reset the bootom css attribute of .bug class according to your browser
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
/* -webkit-backdrop-filter: blur(7px); */
/* backdrop-filter: blur(7px); */
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
bottom: 24%;
height: 100px;
width: 100px;
/* bottom: 500px; */
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
Another weird thing with backdrop filter is --
with backdrop filter the overflowing element is on the top of the first container's blurred element instead on the behind of it
to see the result please reset the bootom css attribute of .bug class according to your browser
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Roboto", sans-serif;
}
p {
color: white;
}
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 100%;
width: 550px;
background-color: #8f656514;
min-height: 400px;
margin: auto;
padding: 15px;
box-shadow: 0px 0px 8px 0.1px #393939;
margin: auto;
/* position: relative; */
display: flex;
align-items: center;
flex-direction: column;
}
.common {
margin: 35px 0px;
box-shadow: 0px 3px 5px 0px #7f5b5b;
padding: 10px 10px;
width: 100%;
height: 100px;
background-color: red;
/* display: contents; */
}
.in {
display: flex;
color: white;
border-radius: 100px;
align-items: center;
padding: 7px 10px;
background-color: #3a3b3c45;
/* -webkit-backdrop-filter: blur(7px); */
backdrop-filter: blur(7px);
box-shadow: 0px 0px 4px 0.5px #918b90;
height: 50px;
}
.bug {
height: 26px;
background-color: rebeccapurple;
position: absolute;
/* bottom: 24%; */
height: 100px;
width: 100px;
bottom: 500px;
border-radius: initial;
}
<div class="container">
<div class="one common">
<p>First Container</p>
<div class="in">
<p>blurred container </p>
</div>
</div>
<div class="two common">
<p>second Container</p>
<div class="in bug">
blurred overflow
</div>
</div>
<div class="three common">
<p>Third Container</p>
<div class="in ">
<p>blurred container </p>
</div>
</div>
</div>
I have no idea what's going on here and why ???
Please help me to understand this

How would you center three child divs inside of a parent div with css? [duplicate]

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Center child divs inside parent div
(3 answers)
Closed 3 years ago.
I am beginning to learn css. I have three divs that are contained inside of a parent div. The code to all three child divs are the same yet the third div drifts off to the side. How would one go about centering these divs inside of the parent element?
The parent div has been outlined in black to show it's relative position.
#parent {
border-style: solid;
height: 300px;
width: 2000px;
}
#blueBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
margin-top: 50px;
margin-left: 50px;
padding: 10px;
float: left;
display: inline-block;
}
#skyBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
margin-top: 50px;
margin-left: 50px;
padding: 10px;
float: left;
display: inline-block;
}
#rainBowBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
margin-top: 50px;
margin-left: 50px;
padding: 10px;
float: left;
display: inline-block;
}
<div id="parent">
<div id="blueBox">
</div>
<div id="skyBox">
</div>
<div id="rainBowBox">
</div>
</div>
The easiest and best way out is Flexbox. You can try as given below:
I have taken this from w3schools, here's the source: Source
You can add or remove divs and it will adjust accordingly.
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
You can do this easily using flexbox. Run the snippet below and see if the result is what you want.
#parent {
border-style: solid;
height: 300px;
width: 2000px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#blueBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
padding: 10px;
}
#skyBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
padding: 10px;
}
#rainBowBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
padding: 10px;
}
<div id="parent">
<div id="blueBox"></div>
<div id="skyBox"></div>
<div id="rainBowBox"></div>
</div>
Apart from using flexbox peoperty, there is an old school trick for it by using box-sizing property.
#parent {
border-style: solid;
height: 200px;
width: 1400px;
}
#blueBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
padding: 10px;
box-sizing:border-box;
float:left;
margin-top: 50px;
margin-left: 50px;
display: inline-block;
}
#skyBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
padding: 10px;
box-sizing:border-box;
float:left;
margin-top: 50px;
margin-left: 50px;
display: inline-block;
}
#rainBowBox {
border-style: solid;
border-width: 3 px;
border-color: blue;
height: 100px;
width: 400px;
padding: 10px;
box-sizing:border-box;
float:left;
margin-top: 50px;
margin-left: 50px;
display: inline-block;
}
<div id="parent">
<div id="blueBox"></div>
<div id="skyBox"></div>
<div id="rainBowBox"></div>
</div>
I personally recommend to use flex-box for centering html elements.
For a flex component (default flex-direction: row), align-items: center; to vertically center its children, justify-content: center; to horizontally center children.
Assume you have
<div id="parent">
<div id="blueBox"></div>
<div id="skyBox"></div>
<div id="rainBowBox"></div>
</div>
Apply the following css to #parent
#parent {
display: flex;
align-items: center; // vertically center children
justify-content: center; //horizontally center children
}
More about align-items here and here.
More about justify-content here and here.
just use percentages instead of pixels for width and automatic 0 margin to center content.
#parent{
width: 100%
margin: 0 auto;
}
#child1{
width: 33%
margin: 0 auto;
}
#child2{
width: 33%
margin: 0 auto;
}
#child3{
width: 33%
margin: 0 auto;
}
you can easily use flex on your parent and use center on it too
<div id="parent" style="display:flex;align-items:center;margin:0 auto;">
<div id="blueBox"></div>
<div id="skyBox"></div>
<div id="rainBowBox"></div>
</div>

Categories