This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 6 years ago.
I would like to adapt the parent div height to children height in CSS only.
In my code, both columns have same height.
I would like column 2 to have a smaller height as it contains less divs to show.
Let me show you on an example:
#mainPane {
display: flex;
background-color: blue;
}
.column {
width: 250px;
background-color: gray;
margin: 5px 15px 5px 15px;
display: inline-block;
}
.news {
background-color: white;
}
<section id="mainPane">
<div class="column">
<div class="colHeader">Col1</div>
<div class="news">Line1</div>
<div class="news">Line2</div>
<div class="colFooter">Footer</div>
</div>
<div class="column">
<div class="colHeader">Col2</div>
<div class="colFooter">Footer</div>
</div>
</section>
Add align-items:flex-start; to #mainPane:
#mainPane{
display: flex;
align-items: flex-start;
background-color: blue;
}
.column {
width: 250px;
background-color: gray;
margin: 5px 15px 5px 15px;
}
.news{
background-color: white;
}
<section id="mainPane">
<div class="column">
<div class="colHeader">
Col1
</div>
<div class="news">
Line1
</div>
<div class="news">
Line2
</div>
<div class="colFooter">
Footer
</div>
</div>
<div class="column">
<div class="colHeader">
Col2
</div>
<div class="colFooter">
Footer
</div>
</div>
</section>
Related
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
I want to build a simple scroll slider with flexbox with three items. I want the first item to be centered in the page (under the headline) but the following items only should have a less margin.
HTML:
<div class="page-width">
<h1>Headline</h1>
<div class="container">
<div class="flex-item">
<div class="flex-wrapper">
Center me
</div>
</div>
<div class="flex-item">
<div class="flex-wrapper">
Hello World
</div>
</div>
<div class="flex-item">
<div class="flex-wrapper">
Hello World
</div>
</div>
</div>
</div>
CSS:
.page-width {
max-width: 500px;
border: 5px solid green;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: flex-start;
overflow: scroll;
}
.flex-item {
margin-left: 20px;
}
.flex-wrapper {
background: blue;
width: 250px;
height: 250px;
}
How can I achieve to center the first item, while the second and third only remain with a margin of 20px? Also, it should be responsive, for example when the page width is smaller, the first item should still be centered.
I tried to use
.flex-item {
flex: 0 0 100%
}
and center the wrapper inside, so the box would be in the center, but then the second and third item are outside of the screen.
Codepen: https://codepen.io/ascena/pen/wvqZgzg
.page-width {
max-width: 500px;
border: 5px solid green;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: flex-start;
overflow: scroll;
padding-left:20%;
}
.flex-item {
margin-left: 20px;
}
.flex-wrapper {
background: blue;
width: 250px;
height: 250px;
}
<div class="page-width">
<h1>Headline</h1>
<div class="container">
<div class="flex-item">
<div class="flex-wrapper">
Center me
</div>
</div>
<div class="flex-item">
<div class="flex-wrapper">
Hello World
</div>
</div>
<div class="flex-item">
<div class="flex-wrapper">
Hello World
</div>
</div>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
I would like to align the boxes vertically. It works fine if the words in the box is all in one line. However if the words in one of the box goes to 2 lines or more the box will not align properly.
.col {
display: inline-block;
width: 31%;
padding: 2px 5px;
}
.box {
height: 80px;
margin: 0 auto;
display: flex;
background-color: #f4f4f4;
justify-content: center;
align-items: center;
font-size: 20px;
text-decoration: none;
font-weight: normal;
}
<div class="col">
<div class="box">Box</div>
</div>
<div class="col">
<div class="box">This is a box</div>
</div>
<div class="col">
<div class="box">Please see inside this box for some contents to read</div>
</div>
you can use flex box to easily avoid this issue.
put all cols in a flex wrapper.
<div class="wrapper">
<div class ="col">
<div class="box">Box</div>
</div>
<div class ="col">
<div class="box">This is a box</div>
</div>
<div class ="col">
<div class="box">Please see inside this box for some contents to read</div>
</div>
</div>
.wrapper{
display: flex;
}
Its because the <div class="box"> overflow with content.
you could adjust class .box height and add some padding to align them right properly.
.box {
height: 80px;
margin: 0 auto;
display: flex;
background-color: #f4f4f4;
justify-content: center;
align-items: center;
font-size: 20px;
text-decoration: none;
font-weight: normal;
height: 100%;
padding: 28px;
}
Heres an example https://codepen.io/mcfaith9/pen/vYmJvLK
Add a flex parent .row which will contain your col cell columns
/*QuickReset*/ * {margin:0; box-sizing:border-box;}
.row {
display: flex;
}
.col {
display: flex;
flex-direction: column;
}
.cell-4 {
flex: 1 1 33.333%;
}
.box {
padding: 10px;
border: 1px solid #aaa;
background-color: #f4f4f4;
min-height: 80px;
}
<div class="row">
<div class="col cell-4">
<div class="box">Box</div>
</div>
<div class="col cell-4">
<div class="box">This is a box</div>
</div>
<div class="col cell-4">
<div class="box">Please see inside this box for some contents to read</div>
</div>
</div>
This question already has answers here:
Why does the outer <div> here not completely surround the inner <div>?
(2 answers)
Closed 2 years ago.
I have a scrollable area inside which there are a div and a collection of smaller divs.
The yellow container takes the width of the visible viewport of the scrollable area.
How do I make it "wrap" the whole set of pink rectangles automatically like how it happens in a regular non-overflow div?
https://codepen.io/sergeibasharov/pen/mdEdKWO
<div class="scroll-area">
<div class="header">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
</div>
.scroll-area{
background: gray;
width: 500px;
height: 400px;
overflow: auto
}
.header{
background: yellow;
display: flex;
padding: 20px;
}
.cell{
width: 100px;
min-width: 100px;
padding: 8px 0;
margin: 2px;
text-align: center;
background: pink;
}
To wrap children of an element with display: flex, use flex-wrap: wrap.
.scroll-area{
background: gray;
width: 500px;
height: 400px;
overflow: auto
}
.header{
background: yellow;
display: flex;
padding: 20px;
flex-wrap: wrap;
}
.cell{
width: 100px;
min-width: 100px;
padding: 8px 0;
margin: 2px;
text-align: center;
background: pink;
}
<div class="scroll-area">
<div class="header">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
</div>
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I should align the fixed width divs.
I have a container with a fixed width
I have dynamic divs inside but they also have a fixed width.
I would like to put 4 divs per line.
So I used CSS's float rule
My actual problem is that when the last div (card) on the line has a short height the next card gets under it.
What I'm expecting is the next div get back to a complete line.
.card {
width:200px;
height:200px;
border: 1px solid black;
float: left;
}
.container {
width: 900px;
}
.shortcard {
height:50px
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card shortcard">
</div>
<div class="card">
It should be in next line
</div>
<div class="card">
</div>
</div>
When the height is longer, the element is getting to another line
.card {
width:200px;
height:200px;
border: 1px solid black;
float: left;
}
.container {
width: 900px;
}
.shortcard {
height:50px
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card ">
</div>
<div class="card">
I'm ok here
</div>
<div class="card">
</div>
</div>
I think that what you are trying to achieve is that, you don't want the long div to come under the short div. So for that, you have to use inline-block with float: left like
.card {
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block; /* to line up the divs in a single line */
float:left; /* to make them stick to the top */
}
.card {
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block;
float: left;
}
.container {
width: 100%;
}
.shortcard {
height: 50px;
}
body,
html {
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card shortcard">
</div>
<div class="card containerdivNewLine">
beside short div but not under it
</div>
<div class="card">
</div>
</div>
Okay, I try to fix this in your code, so that you understand better!
so basic changes are css, create a new class .container and use display: flex properties.
have a look:
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
I'm ok here
</div>
<div class="card">
</div>
</div>
.card {
width:200px;
height:200px;
border: 1px solid black;
display: inline-flex;
}
.container
{
display: flex;
width: 900px;
}
.card {
width:200px;
height:200px;
border: 1px solid black;
display: inline-flex;
}
.container
{
display: flex;
width: 900px;
}
<div class="container">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
I'm ok here
</div>
<div class="card">
</div>
</div>
run the code, and let me know if you want a design like this or not?