My pen: http://codepen.io/anon/pen/itzDa
How can I give the range slider the maximum width without line-breaking the span without using javascript?
I use IE9+ and latest chrome/FF etc.
<div id="wrapper">
<input type="range" />
<span>10 secs.</span>
</div>
#wrapper{
width:600px;
background:pink;
}
I forgot to mention that I do mobile first so if it does not work on IE9 thats ok. The fallback is that the slider is not max. strechted. :)
You can use flexbox to do this:
#wrapper {
width: 600px;
background: pink;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}
#wrapper input {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-ms-box-flex: 2;
box-flex: 2;
display: block;
}
http://codepen.io/anon/pen/itzDa
input[type="range"] {
width: 90%;
}
If the wrapper always has a fixed width (600px) and the span text can be small and big, it's depending on what range you got in mind for the slider,ou probably could do something like this: The span will always float on the right side this way.
HTML:
<div id="wrapper">
<input type="range" />
<span>1088888 secs.</span>
<div class="clear">
</div>
CSS:
#wrapper{
width:600px;
background:pink;
}
input[type=range] {
width: 500px;
float: left;
}
span {
float: right;
}
.clear {
clear: both;
}
Use:
style="display:inline-block;"
on both elements. This will place them inline.
Flexbox isn't supported in IE 9, and floats can get wonky when working with document flow.(even with the clear as suggested).
If your text in the span is static, you can then adjust the range element to fit maximum width at your leisure.
source on flexbox (and any other css element) for cross browsers: http://caniuse.com/
Related
Consider the following HTML/css code sample:
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>
#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}
where I have a container div with two children (also here: http://jsfiddle.net/S8g4E/). The first child has a given height. How can I make the second child to occupy the "free space" of the container div without giving a specific height?
In the example, the pink div should occupy also the white space.
Similar to this question: How to make div occupy remaining height?
But I don't want to give position absolute.
Expanding the #down child to fill the remaining space of #container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up has a defined height.
Samples
.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}
<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>
Grid
CSS's grid layout offers yet another option, though it may not be as straightforward as the Flexbox model. However, it only requires styling the container element:
.container { display: grid; grid-template-rows: 100px }
The grid-template-rows defines the first row as a fixed 100px height, and the remain rows will automatically stretch to fill the remaining space.
I'm pretty sure IE11 requires -ms- prefixes, so make sure to validate the functionality in the browsers you wish to support.
Flexbox
CSS3's Flexible Box Layout Module (flexbox) is now well-supported and can be very easy to implement. Because it is flexible, it even works when #up does not have a defined height.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
It's important to note that IE10 & IE11 support for some flexbox properties can be buggy, and IE9 or below has no support at all.
Calculated Height
Another easy solution is to use the CSS3 calc functional unit, as Alvaro points out in his answer, but it requires the height of the first child to be a known value:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
It is pretty widely supported, with the only notable exceptions being <= IE8 or Safari 5 (no support) and IE9 (partial support). Some other issues include using calc in conjunction with transform or box-shadow, so be sure to test in multiple browsers if that is of concern to you.
Other Alternatives
If older support is needed, you could add height:100%; to #down will make the pink div full height, with one caveat. It will cause overflow for the container, because #up is pushing it down.
Therefore, you could add overflow: hidden; to the container to fix that.
Alternatively, if the height of #up is fixed, you could position it absolutely within the container, and add a padding-top to #down.
And, yet another option would be to use a table display:
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}
Its been almost two years since I asked this question. I just came up with css calc() that resolves this issue I had and thought it would be nice to add it in case someone has the same problem. (By the way I ended up using position absolute).
http://jsfiddle.net/S8g4E/955/
Here is the css
#up { height:80px;}
#down {
height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}
And more information about it here: http://css-tricks.com/a-couple-of-use-cases-for-calc/
Browser support: http://caniuse.com/#feat=calc
Abstract
I didn't find a fully satisfying answer so I had to find it out myself.
My requirements:
the element should take exactly the remaining space either when its content size is smaller or bigger than the remaining space size (in the second case scrollbar should be shown);
the solution should work when the parent height is computed, and not specified;
calc() should not be used as the remaining element shouldn't know anything about another element sizes;
modern and familar layout technique such as flexboxes should be used.
The solution
Turn into flexboxes all direct parents with computed height (if any) and the next parent whose height is specified;
Specify flex-grow: 1 to all direct parents with computed height (if any) and the element so they will take up all remaining space when the element content size is smaller;
Specify flex-shrink: 0 to all flex items with fixed height so they won't become smaller when the element content size is bigger than the remaining space size;
Specify overflow: hidden to all direct parents with computed height (if any) to disable scrolling and forbid displaying overflow content;
Specify overflow: auto to the element to enable scrolling inside it.
JSFiddle (element has direct parents with computed height)
JSFiddle (simple case: no direct parents with computed height)
My answer uses only CSS, and it does not use overflow:hidden or display:table-row. It requires that the first child really does have a given height, but in your question you state that only the second child need have its height not specified, so I believe you should find this acceptable.
#container {
width: 300px;
height: 300px;
border: 1px solid red;
}
#up {
background: green;
height: 63px;
float: left;
width: 100%
}
#down {
background: pink;
padding-top: 63px;
height: 100%;
box-sizing: border-box;
}
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>
check the demo - http://jsfiddle.net/S8g4E/6/
use css -
#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}
Unless I am misunderstanding, you can just add height: 100%; and overflow:hidden; to #down.
#down {
background:pink;
height:100%;
overflow:hidden;
}
Live DEMO
Edit: Since you do not want to use overflow:hidden;, you can use display: table; for this scenario; however, it is not supported prior to IE 8. (display: table; support)
#container {
width: 300px;
height: 300px;
border:1px solid red;
display:table;
}
#up {
background: green;
display:table-row;
height:0;
}
#down {
background:pink;
display:table-row;
}
Live DEMO
Note: You have said that you want the #down height to be #container height minus #up height. The display:table; solution does exactly that and this jsfiddle will portray that pretty clearly.
You can use floats for pushing content down:
http://jsfiddle.net/S8g4E/5/
You have a fixed size container:
#container {
width: 300px; height: 300px;
}
Content is allowed to flow next to a float. Unless we set the float to full width:
#up {
float: left;
width: 100%;
}
While #up and #down share the top position, #down's content can only start after the bottom of the floated #up:
#down {
height:100%;
}
<div class='parent'>
<div class='child'>
<div class='child last'>
</div>
<style>
.parent {
display: flex;
flex-direction: column;
.child {
&.last {
flex-grow: 1;
}
}
}
</style>
I'm not sure it can be done purely with CSS, unless you're comfortable in sort of faking it with illusions. Maybe use Josh Mein's answer, and set #container to overflow:hidden.
For what it's worth, here's a jQuery solution:
var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);
I'm having some trouble getting my image to take up no more than 100% of the available width of the parent container. I'm only noticing the issue in Firefox 36 (not IE or Chrome). So is it a firefox bug or am I missing something here?
Note: The image should never be larger than it's original size.
Chrome:
Firefox:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its <img>-child).
Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.
(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)
Snippet with that fixed:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
min-width:0;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
I have to admit that I'm not sure why, but for some reason in Firefox it looks like you have to give the image a width/height (i.e. something other than "auto"). Our old friend 100% seems to do the trick:
.flexbox .middleColumn img {
width: 100%;
height: 100%;
display: block;
}
Here's a fiddle showing the working solution. Note that I changed the side columns to flex:2 to make the result a bit more apparent.
I seem to get this working with the following:
.flexbox {
display:flex;
}
.flexbox .column {
flex:1 1 0;
overflow:hidden;
background-color: red;
}
.flexbox .middleColumn {
flex-grow:3;
flex-shrink:3;
}
.flexbox .middleColumn img {
max-width:100%;
}
setting flex:1 1 0; on all columns sets them to equally grow and do so from the even and miniscule basis of 0px.
You then overide the grow and shrink on .middleColumn
max-width:100%; is needed as per usual
the magic seems to be overflow:hidden; on the item getting flexed.
the other stuff on the image is not needed.
In my experience, the approach is slightly different, maybe strange, but it works. Basically, I fix the max width to the real image width, so it won't pixelate, and use percentage width instead of max-width. If you have, say an <ul> (flex) container, the cells will be:
li{
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
width: 50%; // for example..
img{
display: block;
max-width: [your real img width in px] // instead of 100%;
width:100%; // instead of max-width
}
}
I'm trying to understand how to make my layout responsive. I have the following code:
<style>
.wrapper{width:1000px;}
.left{float:left; width:100%;max-width:641px;display:inline;}
.right{float:left;width:359px;display:inline;}
</style>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
Now this is OK while the window width is over 1000px. When I shrink the window, the div.right is pushed to the new line instead of giving me the resposive shrinking of div.left. Please point me to the right direction. Thanx!
You sound like you want something flex-box can solve easily. http://codepen.io/tkrugg/pen/pmhrE
If you support only recent browsers, you should give it a try.
.wrapper{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
max-width:1000px;
}
.left{
flex-grow:1;
}
.right{
flex-basis:359px;
}
add this Style to your html. this will work fine.
Demo
.wrapper{
display:table;
max-width:1000px;
width:100%;
}
.left{
display:table-cell;
max-width:641px;
}
.right{
display:table-cell;
width:349px;
}
That's because you're doing it wrong. What you should do instead is to use display: table; CSS property. That's how fluid grids work. So your code becomes this:
<style>
.wrapper { max-width: 1000px; margin: 0 auto; }
.row { display: table; width: 100%; height: auto; }
.left { /* 641px / 1000px = 0.641 * 100 = 64.1% */
width: 64.1%; display: table-cell; vertical-align: top; }
.right { /* 359px / 1000px = 0.359 * 100 = 35.9% */
width: 35.9%; display: table-cell; vertical-align: top; }
</style>
<div class="wrapper">
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
You would have to create a breakpoint for mobile, and stack your divs on top of each other simply by setting display: block; and width: 100%;.
your code has some errors.only left div can see. if my answer doesn't help please put your whole code so people can see the error easily.
how ever your requirement can be achieved adding.
position: absolute;
to the right div like below.
.right{float:left;width:359px;display:inline;position: absolute;}
hope this helps.
Consider the following HTML/css code sample:
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>
#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}
where I have a container div with two children (also here: http://jsfiddle.net/S8g4E/). The first child has a given height. How can I make the second child to occupy the "free space" of the container div without giving a specific height?
In the example, the pink div should occupy also the white space.
Similar to this question: How to make div occupy remaining height?
But I don't want to give position absolute.
Expanding the #down child to fill the remaining space of #container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up has a defined height.
Samples
.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}
<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>
Grid
CSS's grid layout offers yet another option, though it may not be as straightforward as the Flexbox model. However, it only requires styling the container element:
.container { display: grid; grid-template-rows: 100px }
The grid-template-rows defines the first row as a fixed 100px height, and the remain rows will automatically stretch to fill the remaining space.
I'm pretty sure IE11 requires -ms- prefixes, so make sure to validate the functionality in the browsers you wish to support.
Flexbox
CSS3's Flexible Box Layout Module (flexbox) is now well-supported and can be very easy to implement. Because it is flexible, it even works when #up does not have a defined height.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
It's important to note that IE10 & IE11 support for some flexbox properties can be buggy, and IE9 or below has no support at all.
Calculated Height
Another easy solution is to use the CSS3 calc functional unit, as Alvaro points out in his answer, but it requires the height of the first child to be a known value:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
It is pretty widely supported, with the only notable exceptions being <= IE8 or Safari 5 (no support) and IE9 (partial support). Some other issues include using calc in conjunction with transform or box-shadow, so be sure to test in multiple browsers if that is of concern to you.
Other Alternatives
If older support is needed, you could add height:100%; to #down will make the pink div full height, with one caveat. It will cause overflow for the container, because #up is pushing it down.
Therefore, you could add overflow: hidden; to the container to fix that.
Alternatively, if the height of #up is fixed, you could position it absolutely within the container, and add a padding-top to #down.
And, yet another option would be to use a table display:
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}
Its been almost two years since I asked this question. I just came up with css calc() that resolves this issue I had and thought it would be nice to add it in case someone has the same problem. (By the way I ended up using position absolute).
http://jsfiddle.net/S8g4E/955/
Here is the css
#up { height:80px;}
#down {
height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}
And more information about it here: http://css-tricks.com/a-couple-of-use-cases-for-calc/
Browser support: http://caniuse.com/#feat=calc
Abstract
I didn't find a fully satisfying answer so I had to find it out myself.
My requirements:
the element should take exactly the remaining space either when its content size is smaller or bigger than the remaining space size (in the second case scrollbar should be shown);
the solution should work when the parent height is computed, and not specified;
calc() should not be used as the remaining element shouldn't know anything about another element sizes;
modern and familar layout technique such as flexboxes should be used.
The solution
Turn into flexboxes all direct parents with computed height (if any) and the next parent whose height is specified;
Specify flex-grow: 1 to all direct parents with computed height (if any) and the element so they will take up all remaining space when the element content size is smaller;
Specify flex-shrink: 0 to all flex items with fixed height so they won't become smaller when the element content size is bigger than the remaining space size;
Specify overflow: hidden to all direct parents with computed height (if any) to disable scrolling and forbid displaying overflow content;
Specify overflow: auto to the element to enable scrolling inside it.
JSFiddle (element has direct parents with computed height)
JSFiddle (simple case: no direct parents with computed height)
My answer uses only CSS, and it does not use overflow:hidden or display:table-row. It requires that the first child really does have a given height, but in your question you state that only the second child need have its height not specified, so I believe you should find this acceptable.
#container {
width: 300px;
height: 300px;
border: 1px solid red;
}
#up {
background: green;
height: 63px;
float: left;
width: 100%
}
#down {
background: pink;
padding-top: 63px;
height: 100%;
box-sizing: border-box;
}
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>
check the demo - http://jsfiddle.net/S8g4E/6/
use css -
#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}
Unless I am misunderstanding, you can just add height: 100%; and overflow:hidden; to #down.
#down {
background:pink;
height:100%;
overflow:hidden;
}
Live DEMO
Edit: Since you do not want to use overflow:hidden;, you can use display: table; for this scenario; however, it is not supported prior to IE 8. (display: table; support)
#container {
width: 300px;
height: 300px;
border:1px solid red;
display:table;
}
#up {
background: green;
display:table-row;
height:0;
}
#down {
background:pink;
display:table-row;
}
Live DEMO
Note: You have said that you want the #down height to be #container height minus #up height. The display:table; solution does exactly that and this jsfiddle will portray that pretty clearly.
You can use floats for pushing content down:
http://jsfiddle.net/S8g4E/5/
You have a fixed size container:
#container {
width: 300px; height: 300px;
}
Content is allowed to flow next to a float. Unless we set the float to full width:
#up {
float: left;
width: 100%;
}
While #up and #down share the top position, #down's content can only start after the bottom of the floated #up:
#down {
height:100%;
}
<div class='parent'>
<div class='child'>
<div class='child last'>
</div>
<style>
.parent {
display: flex;
flex-direction: column;
.child {
&.last {
flex-grow: 1;
}
}
}
</style>
I'm not sure it can be done purely with CSS, unless you're comfortable in sort of faking it with illusions. Maybe use Josh Mein's answer, and set #container to overflow:hidden.
For what it's worth, here's a jQuery solution:
var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);
I have a div container on my web page with fixed width and it contains form elements for logging in. Below these elements there are a submit button, forgotten password link etc.
It happens the last line elements need fewer width than the box provides. How to spread them evenly? I don't want
default
| A B C |
centering the line like
| A B C |
nor table layout
| A | B | C |
Instead I am looking for some CSS way to achieve:
| A B C |
That is:
put about equal space between all elements
center the whole thing to avoid the first or last to the side
edit:
This answer worked best. I created templates for 2 or 3 elements like this:
div.spread2evenly > div {
display: inline-block;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 50%;
text-align: center;
}
CSS3 flexboxes have better browser support now, although you may need to add additional vendor prefixes for more browser coverage.
Modern Approach:
Just change the display of the container element to flex and then utilize the justify-content property to specify how the browser should distribute the space around and between the flex items along the main axis.
In the example below, you will notice that justify-content: space-around or justify-content: space-between are used to space the elements out evenly.
.container {
display: flex;
}
.container.space-around {
justify-content: space-around;
}
.container.space-between {
justify-content: space-between;
}
<p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<hr />
<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
how about text-align:justify; ?
Try this (http://jsfiddle.net/BYEw5/):
<div class="container">
<div>A</div><div>B</div><div>C</div>
</div>
.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 33%;
text-align: center;
}
Since you're dealing with inline-block, you can't have spaces between the tags (ugly, but it works), otherwise the space will be visible.
Edit 1:
Here is some more info on the inline-block issues: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. You may also have to add display: -moz-inline-box;.
Edit 2:
Also, 33%*3 is not 100%. If you truly want 100% and don't mind some space between the divs you could do:
.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
margin-left: 2%;
width: 32%;
text-align: center;
}
.container > div:first-child {
margin-left: 0;
}
I know this is an ancient question but if someone still happens to look for this, there now is an even easier option using flexboxes: justifiy-content: space-evenly. The name is pretty self explanatory. Here a reference
.container {
display: flex;
justify-content: space-evenly;
}
I'm not sure what your exact HTML is but try this: http://jsfiddle.net/k9FqG/
<div class="test">
A
B
C
<div class="clear"></div>
</div>
.clear {
clear:both;
}
.test {
width:350px;
text-align:center;
border:1px solid #ff0000
}
.test a {
display:block;
float:left;
width:33%;
}
This should get you started:
<style type="text/css">
#container {
width: 210px;
border: 1px solid blue;
}
#container .part {
width: 68px; /*(210 / 3 - borders)*/
float: left;
text-align: center;
border: 1px solid yellow;
}
.clear {
height: 0;
line-height: 0;
overflow: hidden;
font-size: 0;
clear: left;
}
</style>
And then the HTML:
<div id="container">
<div class="part">A</div>
<div class="part">B</div>
<div class="part">C</div>
<div class="clear"> </div>
</div>
I only added borders so you could see what the CSS was doing.
I wanted to perform some hover effect and justify-content: space-between wasn't very clean. This helped for me.
<div style="display: flex;">
<div style="flex: 1 1 auto"> A </div>
<div style="flex: 1 1 auto"> B </div>
<div style="flex: 1 1 auto"> C </div>
</div>
(I originally got this answer from a different S.O. answer a very long time ago. Pardon me for not mentioning original credit, as I don't know)