So I have a variable number of elements in a div that has a variable width. The elements inside have a fixed space between them, 5px, but each one needs to expand to fill the full width of the space of the outer div with padding, so the text can be centerized.
Example:
.button-container{
width: 100%;
height: 50px;
}
.button-container .button{
min-width: 75px;
display: inline-block;
text-align: center;
border: 1px solid #FF0000;
}
.button-container .button + .button-container .button{
margin-left: 5px;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
So how can I make the padding inside of the button class elements have a dynamic left and right padding to fill the space of the button-container class div?
Ideally, the solution will be a CSS only solution, as I don't want to have jQuery to do the spacing.
CSS tables would work here.
.button-container {
width: 100%;
height: 50px;
display: table;
border-collapse: separate;
border-spacing: 5px;
}
.button-container .button {
display: table-cell;
text-align: center;
border: 1px solid #FF0000;
vertical-align: middle;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
You can use flexbox:
.button-container {
display: flex; /* Magic begins */
}
.button-container > .button {
flex: 1; /* Distribute the width equally */
text-align: center;
margin-left: 5px;
border: 1px solid #FF0000;
}
.button-container > .button:first-child {
margin-left: 0;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
Related
trying to create table with 100% width content, but "width" did not work. can anyone help plz. how can I fix it? And there is "div" inside table cos I can't padding content another way. I need paddin from table borders, and i need bottom lines between table rows. without "border-collapse" "border-bottom" did not work for table rows. So i need add one more div just to do padding :(. Can anyone show me how to do it right without adding one more "div" inside table.
.tabble {
display: table;
border-collapse: collapse;
border-spacing: 10px;
border-radius: 6px;
width: 100%;
}
.table__row {
display: table-row;
width: 100%;
border-bottom: 1px solid red;
}
.table__row:last-child {
border: none;
}
.table__cell {
display: table-cell;
width: 20%;
padding: 10px;
text-align: left;
}
.padding-div {
padding: 5px 20px;
width: 100%"
}
</style>
<div class="tabble">
<div class="padding-div">
<div class="table__row">
<div class="table__cell">1</div>
<div class="table__cell">1</div>
</div>
<div class="table__row">
<div class="table__cell">2</div>
<div class="table__cell">2</div>
</div>
</div>
</div>```
There are a number of things wrong with your table.
There is a typo, " instead of ; in the CSS for .padding-div.
The table cells have width:20%, which interferes with the width calculations. The browser won't know whether to make the two cells together 40% or 100% wide. Remove this.
And the biggest problem, the padding div. You can't have an ordinary div inside a table and with a table row inside. Remove this div. If you want space around the whole table, apply a margin to the table itself.
Then it will have the desired result. That is, if what you want is to make the whole table as wide as the viewport.
.tabble {
display: table;
border-collapse: collapse;
border-spacing: 10px;
border-radius: 6px;
width: calc(100% - 40px); /* changed */
margin: 5px 20px; /* new */
}
.table__row {
display: table-row;
width: 100%;
border-bottom: 1px solid red;
}
.table__row:last-child {
border: none;
}
.table__cell {
display: table-cell;
/*width: 20%;*/ /* removed */
padding: 10px;
text-align: left;
}
.padding-div {
padding: 5px 20px;
width: 100%
}
<div class="tabble">
<div class="table__row">
<div class="table__cell">1</div>
<div class="table__cell">1</div>
</div>
<div class="table__row">
<div class="table__cell">2</div>
<div class="table__cell">2</div>
</div>
</div>
Note: if you do want the table to have a border, as you said in the comments, the solution changes a bit. Then the table itself needs to have a padding, and that means you can't use border-collapse, you'll have to use border-spacing:0 instead, which also means you'll need to apply the inside borders to the cells rather than the rows.
.tabble {
display: table;
border-spacing: 0; /* changed */
border-radius: 6px;
width: calc(100% - 40px); /* changed */
padding: 5px 20px; /* new */
border: 1px solid tan; /* purely for demo purposes */
}
.table__row {
display: table-row;
width: 100%;
}
.table__cell {
display: table-cell;
padding: 10px;
text-align: left;
}
.table__row:not(:last-child) .table__cell {
border-bottom: 1px solid red;
}
<div class="tabble">
<div class="table__row">
<div class="table__cell">1</div>
<div class="table__cell">1</div>
</div>
<div class="table__row">
<div class="table__cell">2</div>
<div class="table__cell">2</div>
</div>
</div>
Here is my problem. I have inline-block divs inside another div.
.timeEvents {
width: 100%;
overflow: hidden;
text-align: center;
}
.timeline {
border: 1px solid;
}
.events1, .events2 {
border: 1px solid;
}
.ev1, .ev3 {
border: 1px solid red;
}
.ev2 {
margin: 0 auto;
border: 1px solid red;
display: inline-block;
}
.mDiv {
display: inline-block;
padding-left: 12px;
padding-right: 12px;
border: 1px solid blue;
}
<div class="timeEvents">
<div class="events1">
<div class="ev1">Data Field 1</div>
</div>
<div class="timeline">
<div class="ev2">
<div class="mDiv">5</div>
<div class="mDiv">10</div>
<div class="mDiv">15</div>
<div class="mDiv">20</div>
<div class="mDiv">25</div>
</div>
</div>
<div class="events2">
<div class="ev3">Data Field 2</div>
</div>
</div>
I want the .ev2 to be wrapped around its children which are inline. Then, the two data fields, respectively .ev1 and .ev3 placed above and below, should have the same width as .ev2. Which means that all divs with a red border (in my JSFiddle) should have the same width (dynamic, I don't know it) and that width should not be 100% as it's in the jsFiddle example: https://jsfiddle.net/mzjqw2wx/17/.
EDIT - I updated my fiddle. I don't want to lose the outside 100% divs, I want to align the three red sections to have the same width, the page and the outside divs all remain 100%. The tip to use inline-block on the wrapper was great, it did what I wanted with the middle one. I wanted to align all red containers and I did it with jQuery.
You need to also set display: inline-block; for the common wrapper (and give text-align: center to its parent)
body { text-align: center; }
.timeEvents {
display: inline-block;
margin: 0 auto;
}
JSFiddle
Result:
That's pretty easy to implement using Flexbox.
Just assign display: flex; to .ev2 and flex-grow: 1; to the the .myDiv class.
You can see it in the following code:
.timeEvents {
width: 100%;
overflow: hidden;
text-align: center;
}
.timeline {
border: 1px solid;
}
.events1, .events2 {
border: 1px solid;
}
.ev1, .ev3 {
border: 1px solid red;
}
.ev2 {
margin: 0 auto;
border: 1px solid red;
display: flex;
}
.mDiv {
display: inline-block;
padding-left: 12px;
padding-right: 12px;
border: 1px solid blue;
flex-grow: 1;
}
<div class="timeEvents">
<div class="events1">
<div class="ev1">Data Field 1</div>
</div>
<div class="timeline">
<div class="ev2">
<div class="mDiv">5</div>
<div class="mDiv">10</div>
<div class="mDiv">15</div>
<div class="mDiv">20</div>
<div class="mDiv">25</div>
</div>
</div>
<div class="events2">
<div class="ev3">Data Field 2</div>
</div>
</div>
Check out CSS-Trick's Complete guide to Flexbox for more information.
Use display:table to timeEvents and remove width:100% will make as per your expected.
.timeEvents {
display: table;
overflow: hidden;
text-align: center;
}
Fiddle
I have tthe following simple layout: http://jsfiddle.net/656ckfyq/
<div class="container">
<div>
Some jumping conten here
</div>
<div>
More
</div>
</div>
and these are styles for it
.container {
display: table;
border: 1px silver solid;
}
.container div {
display: table-cell;
padding: 10px;
}
.more {
display: block;
border: 2px red solid;
margin-top: 20px;
}
So the problem is that I want to move only link in second cell 20px down. But somehow it also affects content in first cell too.
So what is the reason fo this behaviour and how can I fix this?
Add the vertical-align: top property to the table-cells:
.container {
display: table;
border: 1px silver solid;
}
.container div {
display: table-cell;
padding: 10px;
vertical-align: top;
}
.more {
display: block;
border: 2px red solid;
margin-top: 20px;
}
<div class="container">
<div>
Some jumping content here
</div>
<div>
More
</div>
</div>
Why my div <div class="two"> didint align verticaly at the middle event after i put vertical-align: middle;
Here's a FIDDLE
HTML :
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
CSS :
.main {
border: 1px solid;
display: inline-block;
}
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
}
.two {
display: inline-block;
width: 10px;
height: 10px;
background-color: cadetblue;
vertical-align: middle;
}
You need the vertical-align:middle on one, and two. That way the vertical middle of one is aligned with the vertical middle of two. You could also just put vertical-align:middle on one which will align its vertical middle position to the baseline vertical position of two.
jsFiddle example
Try this:
Add vertical-align:middle rule to .one class
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
vertical-align: middle; /* Adde Rule */
}
Fiddle
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)