I currently have text which looks like this. I want the 1600+ happy eaters to be all in one line. The title is fine as it is. I am currently using flexbox if this helps.
.currentcitiesmaincontent {
border: 1px solid red;
display: inline-flex;
width: 100%;
}
<div class="currentcitiesmaincontent">
<div>
Lisbon<br>
<p> 1600+ happy eaters</p>
</div>
<div>SAN Franscisco</div>
<div>Berlin</div>
<div>London</div>
</div>
You can set flex layout on inline divs too to make it on one line.
.currentcitiesmaincontent {
border: 1px solid red;
display: inline-flex;
width: 100%;
}
.currentcitiesmaincontent div {
display: flex;
}
.currentcitiesmaincontent p {
margin: 0;
padding: 0;
}
<div class="currentcitiesmaincontent">
<div>
Lisbon<br>
<p> 1600+ happy eaters</p>
</div>
<div>SAN Franscisco</div>
<div>Berlin</div>
<div>London</div>
</div>
i think this is what you are searching for
.currentcitiesmaincontent {
border: 1px solid red;
display: flex;
width: 100%;
}
.currentcitiesmaincontent > div:first-child{
display : flex;
}
* {
margin : 0px;
padding: 0px;
}
<div class="currentcitiesmaincontent">
<div>
Lisbon<br>
<p> 1600+ happy eaters</p>
</div>
<div>SAN Franscisco</div>
<div>Berlin</div>
<div>London</div>
</div>
You should create a class for the paragraph you want with white-space: nowrap;.
p.nowrap {
white-space: nowrap;
}
<p class="nowrap"> 1600+ happy eaters</p>
Related
I am trying to vertically align content without using flexbox because there were some problems with our use case, so I am trying to do it with table which works fine as vertically aligning goes but the problem is that the content inside doesn't fill the remaining height, is there possible to do that through CSS somehow ?
https://jsfiddle.net/s38haqm5/25/
<html>
<body>
<div class="row">
<div class="cell">
<div class="container">
Hello world
</div>
</div>
<div class="cella">
Cell2
</div>
</div>
</body>
</html>
.container {
background-color: red;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
min-height: auto;
max-height: none;
}
.cella {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
height: 30px;
max-height: none;
}
.row {
display: table
}
You need to define parent height. Now your .cell does not have any hight set, so .container doesnt have any value to calculate the 100% from.
Simply add some height to .cell, for example .cell {height: 30px;} (just like you have on .cella.)
Since .cella and .cell are same, Im assuming you might need this bit of an advice.
If you want your cells to be the same with the fact that one of them needs to be styled differently, add the same class on all of them, and then add id to the one that needs to be different and then style the id as you want. Keep in mind that the cell with class and id will have css values combined from both class and id
This worked for me just fine. Give it a try and tell me if it fulfills your wishes.
<html>
<body>
<div class="row">
<div class="cell" id="cell1">
<div class="container">
Hello world
</div>
</div>
<div class="cell" id="cell2">
Cell2
</div>
</div>
</body>
</html>
<style>
.container {
background-color: red;
position: absolute;
inset: 0; /*shorthand for top:0, left:0, bottom:0, right:0*/
height: 100%;
width: 100%;
/* for centering content within container
display:flex;
justify-content:center;
align-items:center;
*/
}
.cell {
display: table-cell;
vertical-align: middle;
position: relative;
border: 1px solid black;
height: min-content;
width: 100px;
}
.row {
display: table
}
</style>
What I have done is that I have set your .container to position absolute and parent .cell to relative, so it becomes a containing block of the .container, inset:0 makes the absolute .container strech over the whole relative .cell. parent. Hope this does the job!
I am creating small divs that contain different colors so users can select them. Currently, I have to insert something between the span tag
<span>11</span>
so that the elements appear on the screen. I tried adding content:"" in the CSS but it's not working.
Can someone suggest to me a better way to solve the problem? The issue is when I'm creating a yellow box and then I have to add extra color: "yellow" to make sure the box is just a box with a color(no text in it). There should be a smarter approach right?
.colorselection {
width: 5px;
height: 5px;
margin-left: 12px;
content: "";
}
.colorselection--yellow {
background: yellow;
}
.colorselection--black {
background: black;
}
.colorselection--red {
background: red;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<span class='colorselection colorselection--black'>11 </span>
<span class='colorselection colorselection--red '>12 </span>
<span class='colorselection colorselection--yellow'>13 </span>
You should use Flexbox.
MDN Docs on Flexbox
CSS Tricks - Guide to Flexbox: this is a very good explanation of the concepts of Flexbox
.flex-box{
display: flex;
}
.colorselection {
width: 20px;
height: 20px;
margin: 2px;
}
.colorselection--yellow {
background: yellow;
}
.colorselection--black {
background: black;
}
.colorselection--red {
background: red;
}
.colorselection--red {
background: red;
}
<div class="flex-box">
<div class="colorselection colorselection--black"></div>
<div class="colorselection colorselection--red"></div>
<div class="colorselection colorselection--yellow"></div>
</div>
There are a few HTML tags working as a block element while span working as an inline element. So you either have to go with a block element HTML tag or simply use display: block or display: inline-block with your span tag.
.colorselection {
width: 25px;
height: 25px;
margin-bottom: 12px;
display: block;
background: #ddd; /* fallback color */
}
.colorselection.yellow {
background: yellow;
}
.colorselection.black {
background: black;
}
.colorselection.red {
background: red;
}
<span class="colorselection"></span>
<span class="colorselection yellow">11</span>
<span class="colorselection yellow"></span>
<span class="colorselection black">11</span>
<span class="colorselection red">11</span>
<span class="colorselection red"></span>
My preferred way of handling this is using CSS variables. You first create a variable that is scoped to the color-selection class, so that it can be overridden by changes within its own scope. Providing a block level display will allow the element to honor height and width dimensions. You could also use inline-flex, flex, or inline-block to achieve the same result.
.color-selection {
--box-color: transparent;
width: 25px;
height: 25px;
background-color: var(--box-color);
margin-bottom: 0.5rem;
display: block;
}
.color-selection.black {
--box-color: black;
}
.color-selection.yellow {
--box-color: yellow;
}
.color-selection.red {
--box-color: red;
}
<span class="color-selection"></span>
<span class="color-selection yellow"></span>
<span class="color-selection red"></span>
<span class="color-selection black"></span>
jsFiddle
I understand! The solution is quite simple. Use insted a inline-element a block element. If you want that all elements inline then you need additional to wrap the colored divs with display:flex.
.container {
display: flex;
gap: 20px;
}
.container div {
width: 40px;
height: 40px;
border:1px solid black;
}
.container div:nth-child(1) {
background: red;
}
.container div:nth-child(2) {
background: green;
}
.container div:nth-child(3) {
background: yellow;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
I'm using flexbox to align my child elements. What I'd like to do is center one element and leave the other aligned to the very left. Normally I would just set the left element using margin-right: auto. The problem is that pushes the center element off center. Is this possible without using absolute positioning?
HTML & CSS
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
width: 500px;
}
#left {
margin-right: auto;
}
#center {
margin: auto;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Add third empty element:
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
And the following style:
.parent {
display: flex;
}
.left, .right {
flex: 1;
}
Only left and right are set to grow and thanks to the facts that...
there are only two growing elements (doesn't matter if empty) and
that both get same widths (they'll evenly distribute the available space)
...center element will always be perfectly centered.
This is much better than accepted answer in my opinion because you do not have to copy left content to right and hide it to get same width for both sides, it just magically happens (flexbox is magical).
In action:
.parent {
display: flex;
}
.left,
.right {
flex: 1;
}
/* Styles for demonstration */
.parent {
padding: 5px;
border: 2px solid #000;
}
.left,
.right {
padding: 3px;
border: 2px solid red;
}
.center {
margin: 0 3px;
padding: 3px;
border: 2px solid blue;
}
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
EDIT: See Solo's answer below, it is the better solution.
The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.
As far as I know, there is no nice way of doing this without using position: absolute;, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.
If you know the exact width of the "Left" div, then you could change justify-content to flex-start (left) and then align the "Center" div like this:
#center {
position: relative;
margin: auto;
left: -{half width of left div}px;
}
If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;, and hide the new right element:
Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
#right {
opacity: 0;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Left</span>
</div>
.parent {
display: flex;
}
.left {
flex: 1;
}
.parent::after {
flex: 1;
content: '';
}
<div class="parent">
<div class="left">Left</div>
<div>Center</div>
</div>
I have another solution. In my opinion, Adding an empty block to the center element is fine but code-wise it bit ugly.
Since this is 4 years old I figured I'd update this with a much easier CSS Grid solution.
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid black;
margin: 0 auto;
width: 500px;
}
#center {
text-align: center;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
If you don't want to rely on positioning, the only way I've found that makes it truly centered is to use a combination of auto margin and negative margin prevent the centered element to getting pushed over by the left aligned element. This requires that you know the exact width of the left aligned element though.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: center;
}
.block {
width: 120px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
.justify-center {
margin-right: auto;
margin-left: -120px;
}
<div class="container">
<div class="block justify-start"></div>
<div class="block justify-center"></div>
</div>
As far as I know this is possible with the following code.
https://jsfiddle.net/u5gonp0a/
.box {
display: flex;
justify-content: center;
background-color: green;
text-align: left;
}
.left {
padding: 10px;
background-color: pink;
}
.center {
padding: 10px;
background-color: yellow;
margin: 0 auto;
}
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
</div>
Try this no hacks :)
CSS
.container{
width: 500px;
margin: 0 auto;
}
.box{
display: flex;
align-items: center;/* just in case*/
justify-content: space-between;
}
.box p:nth-child(2){
text-align: center;
background-color: lime;
flex: 1 1 0px;
}
HTML
<div class="container">
<div class="box">
<p>One</p>
<p>Two</p>
</div>
</div>
http://codepen.io/whisher/pen/XpGaEZ
If you have a grid system you can use it to do what you want without "extra" css.
Below with bootstrap (V 4.X)
Note: It uses flex under the hood
<div class="row">
<div class="col text-left">left</col>
<div class="col text-center">center</col>
<div class="col text-right">right</col>
</div>
Doc bootstrap: https://getbootstrap.com/docs/4.6/layout/grid/
Et voilà ! :)
Solution 1: give 50% width to center element and use justify-content:space-between
#parent {
display: flex;
justify-content: space-between;
}
#center {
flex-basis: 50%;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Solution 2: Add one dummy element and hide it.
#parent {
display: flex;
justify-content: space-between;
}
#right {
visibility:hidden;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Right</span>
</div>
I'm using flexbox to align my child elements. What I'd like to do is center one element and leave the other aligned to the very left. Normally I would just set the left element using margin-right: auto. The problem is that pushes the center element off center. Is this possible without using absolute positioning?
HTML & CSS
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
width: 500px;
}
#left {
margin-right: auto;
}
#center {
margin: auto;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Add third empty element:
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
And the following style:
.parent {
display: flex;
}
.left, .right {
flex: 1;
}
Only left and right are set to grow and thanks to the facts that...
there are only two growing elements (doesn't matter if empty) and
that both get same widths (they'll evenly distribute the available space)
...center element will always be perfectly centered.
This is much better than accepted answer in my opinion because you do not have to copy left content to right and hide it to get same width for both sides, it just magically happens (flexbox is magical).
In action:
.parent {
display: flex;
}
.left,
.right {
flex: 1;
}
/* Styles for demonstration */
.parent {
padding: 5px;
border: 2px solid #000;
}
.left,
.right {
padding: 3px;
border: 2px solid red;
}
.center {
margin: 0 3px;
padding: 3px;
border: 2px solid blue;
}
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
EDIT: See Solo's answer below, it is the better solution.
The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.
As far as I know, there is no nice way of doing this without using position: absolute;, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.
If you know the exact width of the "Left" div, then you could change justify-content to flex-start (left) and then align the "Center" div like this:
#center {
position: relative;
margin: auto;
left: -{half width of left div}px;
}
If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;, and hide the new right element:
Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
#right {
opacity: 0;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Left</span>
</div>
.parent {
display: flex;
}
.left {
flex: 1;
}
.parent::after {
flex: 1;
content: '';
}
<div class="parent">
<div class="left">Left</div>
<div>Center</div>
</div>
I have another solution. In my opinion, Adding an empty block to the center element is fine but code-wise it bit ugly.
Since this is 4 years old I figured I'd update this with a much easier CSS Grid solution.
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid black;
margin: 0 auto;
width: 500px;
}
#center {
text-align: center;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
If you don't want to rely on positioning, the only way I've found that makes it truly centered is to use a combination of auto margin and negative margin prevent the centered element to getting pushed over by the left aligned element. This requires that you know the exact width of the left aligned element though.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: center;
}
.block {
width: 120px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
.justify-center {
margin-right: auto;
margin-left: -120px;
}
<div class="container">
<div class="block justify-start"></div>
<div class="block justify-center"></div>
</div>
As far as I know this is possible with the following code.
https://jsfiddle.net/u5gonp0a/
.box {
display: flex;
justify-content: center;
background-color: green;
text-align: left;
}
.left {
padding: 10px;
background-color: pink;
}
.center {
padding: 10px;
background-color: yellow;
margin: 0 auto;
}
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
</div>
Try this no hacks :)
CSS
.container{
width: 500px;
margin: 0 auto;
}
.box{
display: flex;
align-items: center;/* just in case*/
justify-content: space-between;
}
.box p:nth-child(2){
text-align: center;
background-color: lime;
flex: 1 1 0px;
}
HTML
<div class="container">
<div class="box">
<p>One</p>
<p>Two</p>
</div>
</div>
http://codepen.io/whisher/pen/XpGaEZ
If you have a grid system you can use it to do what you want without "extra" css.
Below with bootstrap (V 4.X)
Note: It uses flex under the hood
<div class="row">
<div class="col text-left">left</col>
<div class="col text-center">center</col>
<div class="col text-right">right</col>
</div>
Doc bootstrap: https://getbootstrap.com/docs/4.6/layout/grid/
Et voilà ! :)
Solution 1: give 50% width to center element and use justify-content:space-between
#parent {
display: flex;
justify-content: space-between;
}
#center {
flex-basis: 50%;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Solution 2: Add one dummy element and hide it.
#parent {
display: flex;
justify-content: space-between;
}
#right {
visibility:hidden;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Right</span>
</div>
Let's say I have a div, 100px wide, and a variable number (from 1 to 6) of elements, 10px wide, inside that div.
How can I equally space them so that:
if there is 1 element inside, there will be no additional spacing
if there are from 2 to 6 elements, spacing between each would be 80px (for 2), 35px (for 3), 20px (for 4), etc...
The first item will always be placed at the most left position, without padding, and the last item will always be placed at the most right position, also without padding.
I'm not concerned about IE, so this could be CSS3. Anyways, I am concerned about javascript. I know this would be a 1 liner in JS, but I certainly want to avoid it if possible, so please refrain answering if you're going to post a JS solution.
Regards
Edit:
Example: http://codepen.io/anon/pen/wbiFA
HTML
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
CSS:
.container {
width: 900px;
border: 1px solid red;
display: flex;
justify-content: space-between;
height: 50px;
}
.item {
border: 1px solid blue;
flex-basis: auto;
width: 171px
}
Ok, did it :)
You don't need CSS3 features like flexible boxes. The following CSS2.1 features are enough:
text-align:justify
display: inline-block
::after pseudo-element
.container {
width: 900px;
border: 1px solid red;
height: 50px;
text-align: justify;
}
.container:after {
content: '';
width: 100%;
display: inline-block;
}
.item {
border: 1px solid blue;
width: 171px;
height: 100%;
display: inline-block;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Using Flexbox i managed a close enough result:
http://codepen.io/coljung/pen/bufmh
.container {
border: 1px solid red;
width:1000px;
height:100px;
display: flex;
justify-content: space-around;
}
.item {
border: 1px solid blue;
background:red;
width:100px;
height:100%;
}
Now, it doesnt achieve the exact padding you are looking for. In that case you have to do it manually for every single case.