I have a page where there is a line of 4 cards, each with width: 25%. Below that I have a line with 3 cards that I want to line up with the first 3 cards of the line above. The cards also have a margin which means that when it divides the card's width with 25% the 3 cards are bigger. Any idea how to fix this?
.section-wrapper {display: flex}
.sessions-card, .earnings-card {flex:0 0 25%; margin: 0 10px; border: 2px solid black; height: 200px}
.session-wrapper:first-child {margin-left: -10px}
.session-wrapper:last-child {margin-right: -10px}
<h1>Sessions</h1>
<div class="section-wrapper">
<div class="sessions-card approved"></div>
<div class="sessions-card completed"></div>
<div class="sessions-card pending"></div>
<div class="sessions-card cancelled"></div>
</div>
<h1>Earnings</h1>
<div class="section-wrapper">
<div class="earnings-card"></div>
<div class="earnings-card"></div>
<div class="earnings-card"></div>
</div>
Instead of the width, you can do it with the flex property and if 20px is the desired margin between them, you'd need to use some calc(), esp. if you want for the first and last one to be touching the parents edges:
.section-wrapper {display: flex; background: lightblue}
/* can also do it with the "justify-content: space-between;" and "margin-right: auto" set on the last ".earnings-card" */
.sessions-card, .earnings-card {
/*width: 25%;*/
flex: 0 0 calc(25% - 15px); /* -15px because of the -20px left & right margin devided by 4 = 5px; 20px - 5px = 15px */
margin: 0 10px;
border: 2px solid black;
height: 200px;
box-sizing: border-box;
}
.sessions-card:first-child,
.earnings-card:first-child {
margin-left: 0;
}
.sessions-card:last-child,
.earnings-card:last-child {
margin-right: 0;
}
<h1>Sessions</h1>
<div class="section-wrapper">
<div class="sessions-card approved"></div>
<div class="sessions-card completed"></div>
<div class="sessions-card pending"></div>
<div class="sessions-card cancelled"></div>
</div>
<h1>Earnings</h1>
<div class="section-wrapper">
<div class="earnings-card"></div>
<div class="earnings-card"></div>
<div class="earnings-card"></div>
</div>
Related
Update: I think there is no easy solution to this if I have to use flexbox. I'll just use "flex-shrink: 0" and use media queries to adjust the design. Anyway, thanks for your help.
I have got a horizontal list (display: flex) with multiple elements. When I reduce the window size the list elements start to shrink. Unfortunately, the width of the elements nearly stays the same. The li-elements take up too much space. I want the li-element's size to fit the content. If I add "flex-shrink: 0" to the li-element the width is right, but I need this word-wrap.
How to fix this?
With flex-shrink: 0
With flex-shrink: 1
#categories ul {
border-top: 1px solid lightgrey;
display: flex;
margin: 0 0 -1px 0;
padding: 7px 0 0 0;
}
#categories li {
padding: 0 0 7px 0;
margin-right: 15px;
list-style-type: none;
}
<nav id="categories">
<ul>
<li><a href="#">
Thanks & regards,
Mark
Remember that the flex-shrink property sets the flex-shrink of a flex container item. So the items will shrink to fit the container if they are larger than the container's size. In your case, I think that setting flex-shrink to 2 would make the word-wrap as you requested. Check this code snippet. I hope it helps!
function myFunction(val) {
document.getElementById("example-element").style.flexShrink = val;
}
* {
font-family: arial;
}
.buttons-section {
display: flex;
justify-content: space-evenly;
width: 70%;
}
.example-container {
background-color: #eee;
border: .2em solid;
padding: .75em;
border-radius: 10px;
width: 70%;
margin-left: 20px;
max-height: 300px;
display: flex;
}
.example-container>div {
margin: 10px;
}
.first-solution>div {
background-color: rgba(0, 255, 0, 0.2);
border: 3px solid green;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
p {
margin-left: 20px;
}
small {}
.second-solution {
flex: 1 1 0;
justify-content: space-evenly;
}
.second-solution>div {
background-color: rgba(255, 0, 0, 0.2);
border: 3px solid red;
text-align: center;
}
.third-solution {
flex-wrap: wrap;
}
.third-solution>div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
flex-basis: 100px;
text-align: center;
}
<section class="buttons-section">
<div>
<pre><code>flex-shrink: 0;</code></pre>
<button type="button" onclick="myFunction(0)" aria-hidden="true">Apply
</button>
</div>
<div>
<pre><code>flex-shrink: 1;</code></pre>
<button type="button" onclick="myFunction(1)" aria-hidden="true">Apply
</button>
</div>
<div>
<pre><code>flex-shrink: 2;</code></pre>
<button type="button" onclick="myFunction(2)" aria-hidden="true">Apply
</button>
</div>
</section>
<br>
<div>
<section>
<div class="example-container first-solution">
<div id="example-element">I shrink</div>
<div id="example-element">Item Two</div>
<div id="example-element">Item Three</div>
</div>
</section>
</div>
<p>Added more examples after the first comment. Feel free to resize the screen to see the behaviour😉</p>
<p>All elements same size, container with flex: 1 1 0;<br>
<small>Added <b>justify-content: space-evenly;</b> which helps to distribute the extra free space </small>
</p>
<div>
<section>
<div class="example-container second-solution">
<div>Item one</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
</div>
<p>Suggestion: using flex-wrap: wrap; on the container so the items will always fit the container</p>
<div>
<section>
<div class="example-container third-solution">
<div>Item one</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
</div>
Can you paste your code here so we can see more info about your problem. Also did you try with flex-grow property?
This question already has answers here:
CSS center display inline block?
(9 answers)
Closed 5 years ago.
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder{
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
}
.content {
height: 100%;
width: 400px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
display: inline-block;
font-size: 0;
margin: 0 auto;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
Even though I have margin: 0 auto; on the .detailedBox it still isn't centering. Is it because it doesn't have a fix width? It doesn't have a fixed width because I want the .detailedBox to be the width of all the .content's combined, but also centered.
If you change .detailBox to have display: flex (instead of inline-block) and then do justify-content: center then it'll center that div horizontally.
Since .detailBox is set to inline-block, it cannot be centered by using margin:0 auto. One way to understand this is that the "margin centering" technique relies on "filling up" available horizontal space. But there is no available space when using an inline element. (Reference: margin:auto; with inline-block.)
Also note that:
10.3.9 'Inline-block', non-replaced elements in normal flow
If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
— w3.org
One alternative is to let .detailBox default to display:block and set text-align:center to horizontally center it's child .content elements, which are inline-block.
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder {
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
}
.content {
height: 100%;
width: 100px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
font-size: 0;
text-align:center;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
You mentioned that you want .detailBox to be the width of all the content combined. So, if for some reason you need .detailBox to remain inline-block, you could set text-align:center on it's parent, .holder. Like this:
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder {
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
text-align:center;
}
.content {
height: 100%;
width: 100px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
display:inline-block;
font-size: 0;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
I have a div where I display next and previous blog post. I have the title in one container (footer_post_title) and the year and "read more button" in another container (footer_post_buttons)underneath. I need to have the second container stay in the bottom of the main container (blog_image_footer) no matter how long the title is in (footer_post_title). How can I achieve this?
<div class="col-md-6 more-articles-left">
<div class="more-articles previous">
<div class="blog_image_footer">
<div class="row artikkel-title-previous" style="height:100%; background: linear-gradient(24deg, rgba(167, 85, 194, 0.9), rgba(219, 197, 218, 0.9)), url('/files/blog_pictures/o-KID-EATING-facebook.jpg') no-repeat center center /cover">
<div class="container footer_post_title">
<div class="col-md-12">
<h1 class="blog_post_title_footer">How to teach Your kids to eat healthy</h1>
</div>
</div>
<div class="container footer_post_buttons">
<p class="blog_post_year_footer">December 2016</p>
Read now!
</div>
</div>
</div>
</div>
</div>
You can set position: relative to the container and position: absolute to its child so you will be able to position your child element taking as reference your parent element.
After that, you can set bottom: 0 to the child so the child will be fixed at the bottom of its container.
.blog_image_footer{
position: relative;
}
.footer_post_buttons{
position: absolute;
bottom: 0;
}
You can use this basic principle:
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
body{
display:flex;
flex-direction: column;
}
#container
{
margin: 0 auto;
width:100%;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
flex-grow:1;
display:flex;
}
#footer,#header
{
margin: 0 auto;
width:100%;
text-align: center;
height:1.5em;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
}
<div id="header">
header here
</div>
<div id="container">
this is container
</div>
<div id="footer">
footer here
</div>
Try using bootstraps grid system:
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
This should allow you to make the h1 container responsive.
So I got a question about DIVs. I want 2 rows with 3 divs in each, centered. But the problem is if I do clear: left; all 6 will be next o eachother. Here is how my code looks like right now and I hope you can help me out.
CSS:
.row1 {
position: absolute;
height: 270px;
}
.row2 {
position: absolute;
height: 270px;
}
.columns {
width: 190px;
height: 274;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
}
Here is my HTML:
<div id="row1">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
<div id="row2">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
this is one div:
head text
paragraph text
They are all floating next to each other. You should add a clear row where you want to seperate them. We usually call it clearfix.
<style>
.clearfix{ clear:both; }
</style>
</div>
<div class="clearfix"></div>
<div id="row2">
Try to use "display: inline-block" instead of float and remove "position: absolute". Add closing divs for the columns. And change css for the rows to refer to id, not class.
CSS:
.columns {
display: inline-block;
width: 190px;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
}
#row1 {
height: 270px;
}
#row2 {
height: 270px;
}
HTML:
<div id="row1">
<div class="columns">1.1</div>
<div class="columns">1.2</div>
<div class="columns">1.3</div>
</div>
<div id="row2">
<div class="columns">2.1</div>
<div class="columns">2.2</div>
<div class="columns">2.3</div>
</div>
JsFiddle: http://jsfiddle.net/a5vKH/1/
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>