The image below shows my problem. My text is being stacked because it is displayed flex. There will be a lot more fields just like this one so I do not want to put a set width for all of them.
I have tried width: auto but that doesn't work.
I can just expand the width to around 15% but I will have a lot more fields just like this one so I do not want to put a set width for all of them.
<div class="container">
<h2>Section I.</h2>
<div class="row">
<div class="col one">
<label for="origin__location">Origin Location</label>
<div class="underline"></div>
</div>
</div>
</div>
[.container{
margin-left: 1em;
}
.row{
width: 100%;
display: flex;
margin-bottom: 2em;
margin-left: 10px;
}
.col{
display: flex;
}
.one{
flex: 1;
}
label{
width: auto;
}
.underline{
border-bottom: solid .5px #000;
width: 100%;
margin-left: 1em;
}
I want my text to be in one line and work for words with more and/or fewer characters than what I already have.
I added white-space:pre; to label.
.container{
margin-left: 1em;
}
.row{
width: 100%;
display: flex;
margin-bottom: 2em;
margin-left: 10px;
}
.col{
display: flex;
}
.one{
flex: 1;
}
label{
width: auto;
white-space:pre;
}
.underline{
border-bottom: solid .5px #000;
width: 100%;
margin-left: 1em;
}
<div class="container">
<h2>Section I.</h2>
<div class="row">
<div class="col one">
<label for="origin__location">Origin Location</label>
<div class="underline"></div>
</div>
</div>
</div>
You can set a width definition for you labelelement, either a fixed width or a percentage:
.container{
margin-left: 1em;
}
.row{
width: 100%;
display: flex;
margin-bottom: 2em;
margin-left: 10px;
}
.col{
display: flex;
width: 120px;
}
.one{
flex: 1;
}
label{
width: 25%;
}
.underline{
border-bottom: 0.5px solid black;
width: 100%;
margin-left: 1em;
}
<div class="container">
<h2>Section I.</h2>
<div class="row">
<div class="col one">
<label for="origin__location">Origin Location</label>
<div class="underline"></div>
</div>
</div>
</div>
Related
I'm trying to align div horizontally as the browser resizes, currently, I have 3 divs. As per the requirement, I can add an additional div. My problem is as soon I increase the window size above 2500, the right side of the screen becomes empty & all the divs are floating to left. As I cannot set the div width to 30-33% as per the requirement. Below is my code. kindly help.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
float: left;
display: flex;
width: 100%
}
div.box {
float: left;
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 30%;
border: 1px solid #cccccc;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
As #Arman Ebrahimi had already mentioned correctly. Use flex box only. The issue of responsibility can be handled well with media queries.
Working example
* {
box-sizing: border-box;
}
div.box-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
gap: 10px;
width: 80%;
margin: 0 auto;
/* or use justify-content: center; */
}
.box {
background-color: #f1f1f1;
padding: 10px;
flex: 30%;
border: 1px solid #cccccc;
word-break: break-word;
height: 326px;
}
#media (max-width: 800px) {
.box {
flex: 100%;
}
}
<div class="box-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Remove float and only use flex:
* {
box-sizing: border-box;
}
body,
html {
margin: auto;
}
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
}
div.box {
background-color: #ffffff;
padding: 10px;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: calc(100vw / 3);
/*calc(100vw / number of div)*/
border: 1px solid #cccccc;
word-break: break-word;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Use justify-content: center; when you are using flex. This means the flexed contents will always be centered on all screen types.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 33.33%;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Edit ~ add another div, reduce the % the div covers. Demonstrate min-width responsiveness.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 24%;
min-width: 300px;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
I am trying to create div which serves as my menu selection of my website. I want it to put into the center of my parent div. I did a lot of experiment but none of it work. Below is my CSS Code
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
and this is my html file
<div class="cell lt-main-menu">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
...
</div>
What i want is similar to picture below.
Hi i have created a pen in the CodePen app.
Using Flex you can easily center vertically and horizontally.
.lt-main-menu {
/*...*/
display:flex;
justify-content: center;
align-items: center;
}
This is the pen https://codepen.io/alessandroinfo/pen/JQPrYm
Try something like that, using flex properties:
<style type="text/css">
.cell {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
margin: 10px 0;
}
</style>
<div class="cell lt-main-menu">
<div class="cell-wrapper">
<div class="lt-menu">menu 1</div>
<div class="lt-menu">menu 2</div>
<div class="lt-menu">menu 3</div>
</div>
</div>
Try using display: flex to align items. This is a sample code. Hope this helps
HTML
<div class="d-flex flex-row align-items-start m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
<div class="d-flex flex-row align-items-center justify-content-center m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.container-block {
width: 100px;
height: 100px;
background: black;
margin: 0 5px;
}
.m-2 {
margin: 0.5rem;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/dbguqy6w/
This will do the job. I always find flexbox to work best for aligning things like this.
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
width: 100%;
background: deepskyblue;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
background: black;
width: 100px;
height: 100px;
margin: 0 10px;
text-align: center;
display: inline-block;
}
Demo: https://jsfiddle.net/trethewey/qs1kvuf5/16/
Try this.
.cell {
position: relative;
color: white;
font-size: .8rem;
padding: 1rem;
}
.box-containers {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
<div class="cell lt-main-menu">
<div class="box-containers">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
</div>
</div>
You can also have some other references HERE.
I want to add text at bottom right corner inside card element. The text which I want to enter is Innings and Average. I have created flex-box but text such as innings and average is not getting displayed in bottom right corner.
Code:
.playercard1 {
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
}
.item {
padding-left: 10px;
}
.info {
margin-top: 25px;
}
<div class="playercard1">
<img class="profilepic" src="./profile.jpg">
<div class="item">
<div class="info">
<h6>Naman Kohli, Team Name, Right-Hand bat</h6>
<h2 className="cardtitle1">150</h2>
<p>Innings:5</p>
<p>Average:40.67</p>
</div>
</div>
</div>
In my screenshot you can see the innings and average is not getting displayed at bottom right corner. Check screenshot below:
What I am trying to achieve see in below screenshot I want to display innings and average at bottom right corner like the one in below screenshot.
Here is my solution, its not perfect, but it will give you a starting point
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
}
.item {
padding-left: 10px;
flex:1;
}
.info {
margin-top: 25px;
}
.flex{
display:flex;
justify-content:space-between;
}
.cardtitle1{
font-size:24px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/100x100">
<div class="item">
<div class="info">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="flex">
<div class="cardtitle1">150</div>
<div>
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
</div>
</div>
</div>
</div>
With position:absolute
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
position: relative;
}
.item {
padding-left: 10px;
flex: 1;
}
.info {
margin-top: 25px;
}
.flex {
display: flex;
justify-content: space-between;
}
.cardtitle1 {
font-size: 30px;
margin-top:25px;
}
.absolute {
position: absolute;
bottom: 10px;
right: 15px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/80x80">
<div class="absolute">
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
<div class="item">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="cardtitle1">150</div>
</div>
</div>
.playerCard{
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
padding: 15px;
}
.playerCard .player_profile_pic{
display: inline-block;
vertical-align: top;
border-radius:50px;
}
.playerCard .player_profile_pic img{
border-radius: 100%;
width: 100px;
height: 100px;
}
.playerCard .player_details_div{
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-left: 15px;
width: calc(100% - 30px);
}
.player_details_div .player_name_det{
font-size: 16px;
}
.player_details_div .rank_ings_main_div{
width: 100%;
}
.rank_ings_main_div .number_div{
font-size: 30px;
text-align: left ;
float: left;;
}
.rank_ings_main_div .avg_ings_div{
float: right;
text-align: right;
}
.avg_ings_div p{
margin: 5px 0;
}
<div class="playerCard">
<div class="player_profile_pic">
<img src="https://i.stack.imgur.com/l60Hf.png" alt="">
</div>
<div class="player_details_div">
<div class="player_name_det">
Naman Kohli , Team Name, Right Hand Bat
</div>
<div class="rank_ings_main_div">
<div class="number_div">150</div>
<div class="avg_ings_div">
<p>Innings : 3</p>
<p>Average : 50.00</p>
</div>
</div>
</div>
</div>
I guess you need something like this.
Hope this helps.
I am trying to display multiple circles on the same horizontal axis but with different width and height. The problem is that the circles are shrinked.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/cxuxgy0u/
You should not use the table layout for this. Your HTML does not semantically represent a table, so table element is worng to use.
What you want to do can be achieved with Flexbox.
article {
display: flex;
align-items: center;
}
article > div + div {
margin-left: 1rem;
}
article > div {
flex-shrink: 0;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
article > div:nth-child(2) {
height: 6rem;
width: 6rem;
}
<article>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
</article>
You might want to read more about Flexbox on MDN.
A simple flexbox solution. Just be sure to set flex-shrink to 0, because the initial value is 1, which allows flex items to shrink when necessary to prevent overflowing the container.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: flex;
align-items: center;
}
.circle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 100px; /* flex-shrink: 0, to disable shrinking default */
height: 100px;
border-radius: 50%;
margin: 20px;
border: 1px solid #000;
}
.big-circle {
flex-basis: 300px;
height: 300px;
}
<div class="circles-container">
<div class="circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
https://jsfiddle.net/cxuxgy0u/7/
Try this:
HTML
<div class="container">
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
</div>
CSS
.container {
display:flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.circle {
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle:nth-child(odd) { width: 100px; height: 100px; }
.circle:nth-child(even) { width: 200px; height: 200px; }
Uses flexbox and is the simplest way to achieve what you want.
Here's a fiddle https://jsfiddle.net/itsag/sk3tdo4L/
Hope it helps!
I think your problem is found in the styling.
For each circle, you need to remove the style
display:table-cell
vertical-align: middle;
and then u need to bring in line-height. The line-height should be equal to the height of the circle, for for the smaller circle, you will have
line-height:100px //this brings the text to the middle of the circle vertically.
Then also, you need to increase the border-radius from 50% to 100%
border-radius:100%;
Therefore, your css will not look like this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 100%;
text-align: center;
line-height:100px;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
line-height:300px;
}
This should help you.
Flexbox:
container {
display: flex;
justify-content: center;
}
If you want space between the pictures, use:
margin-left:
or
margin-right:
try this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: flex;
}
.circle {
padding: 40px 30px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell {
}
.big-circle {
padding: 150px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
Traditionally, I would stick with html table, but in my app I have to add some interaction in this "table" (I will be implementing collapsible window between rows with event listener, etc).
So I decided to use flexbox and emulate like a html table.
However I am having trouble for each row to align correctly column wise.
.container {
display: flex;
flex-wrap: wrap;
border: black 1px solid;
width: 100%;
}
.row {
display: flex;
height: 40px;
width: 100%;
align-items: center;
}
.cell {
padding-right: 25px;
padding-left: 20px;
align-items: center;
font-size: 20px;
border-right: 1px solid salmon
}
<div class="container">
<div class="row">
<div class="cell">Descrption</div>
<div class="cell">Amount per Month</div>
<div class="cell">Amount per year</div>
</div>
<div class="row">
<div class="cell">Income</div>
<div class="cell">$20,000</div>
<div class="cell">$45,000</div>
</div>
</div>
As you can see, the right-border of each cells does not align correctly.
Is it possible using flex-box to achieve this? Or is my implementation is wrong?
Note: I cannot use any JavaScript nor jQuery for this one.
Since you are using display flex. you can use flex-basis property
See snippet below
.container {
display: flex;
flex-wrap: wrap;
border: black 1px solid;
width: 100%;
}
.row {
display: flex;
height: 40px;
width: 100%;
align-items: center;
}
.row .cell{
flex:0 0 30%;
}
.cell {
padding-right: 25px;
padding-left: 20px;
align-items: center;
font-size: 20px;
border-right: 1px solid salmon
}
<div class="color-div">
</div><div class="container">
<div class="row">
<div class="cell">Descrption</div>
<div class="cell">Amount per Month</div>
<div class="cell">Amount per year</div>
</div>
<div class="row">
<div class="cell">Income</div>
<div class="cell">$20,000</div>
<div class="cell">$45,000</div>
</div>
</div>
It is quite simple. Just give equal width to cell. e.g.:
.container {
display: flex;
flex-wrap: wrap;
border: black 1px solid;
width: 100%;
}
.row {
display: flex;
height: 40px;
width: 100%;
align-items: center;
}
.cell {
padding-right: 25px;
padding-left: 20px;
align-items: center;
font-size: 20px;
border-right: 1px solid salmon;
width: 33%;
}
<div class="container">
<div class="row">
<div class="cell">Descrption</div>
<div class="cell">Amount per Month</div>
<div class="cell">Amount per year</div>
</div>
<div class="row">
<div class="cell">Income</div>
<div class="cell">$20,000</div>
<div class="cell">$45,000</div>
</div>
</div>