I have a parent DIV which may have 1,2 or 3 child elements. If the parent has only one element the child should have 100% width, if 2 then each element should have 50% of available width and in case of 3 elements each child should have 33.3333% of width.
If you want to avoid tables and are fine with flexbox (which is supported by all modern browsers), your solution would be simply
.container {
display: flex;
align-items: stretch;
}
.container > * {
display: block;
width: 100%;
}
with
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
(works fine for more elements as well).
/* solution */
.container {
display: flex;
align-items: stretch;
}
.container > * {
display: block;
width: 100%;
height: 100%;
}
/* for demo */
.container {
height: 30px;
}
.container > * {
height: 100%;
}
.container > :first-of-type {
background-color: red;
}
.container > :nth-of-type(2) {
background-color: green;
}
.container > :nth-of-type(3) {
background-color: blue;
}
<h3>one item</h3>
<div class="container">
<div></div>
</div>
<hr>
<h3>two items</h3>
<div class="container">
<div></div>
<div></div>
</div>
<hr>
<h3>three items</h3>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
Use table layout
.wrap{
border: 1px solid green;
min-height: 100px;
display: table;
width: 100%;
}
.wrap > div{
border: 1px solid red;
display: table-cell;
}
<div class="wrap">
<div class="box">div 1</div>
<div class="box">div 2</div>
<div class="box">div 3</div>
</div>
Related
I'm trying to achieve the following:
I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.
My HTML structure is the following:
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
In the .interface CSS I have the following:
.interface
{
position: absolute;
top: 15%;
}
With this CSS I'm unable to see the green rectangle. If I remove the position: absolute (and therefore the top: 15% stops applying) I'm able to see the green rectangle.
You can see the issue in this JSFiddle: https://jsfiddle.net/v9euwdz3/
So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?
Here is what you're trying to achieve using flex:
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.navetc {
background-color: white;
height: 15vh;
}
.top {
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="navetc">
SPACE
</div>
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
You could also use margin-top: 15%; instead of a placeholder div
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.top {
margin-top: 15vh;
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
(I used vh instead of % to get it to show up correctly in this code snippet)
as we know the content that have height which is 100% means is 100% of its parent and while the height of the parent is not defined will cause an error that's what you was stuck with you set the with of body to 100% but was not right you would set it to 100vh to fit the screen if you are on computer and the other mistakes that I found was in your calculation where you used to subtract the measurement which is in parcentages from the one in pixels height: calc(100% - 150px); and the others where simple mistakes
html,
body {
height: 100vh;
}
.app {
position: relative;
height: 100%;
display: flex;
}
.interface {
position: absolute;
height: 100%;
top: 15%;
}
.view {
position: fixed;
height: 100%;
background-color: #ccc;
width: 350px;
}
.body {
position: relative;
height: 100%;
}
.body .top {
height: 15%;
border: 1px solid #000;
}
.body .middle {
height: 60%;
border: 1px solid red;
}
.body .bottom {
height: 20%;
border: 1px solid green;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
to see the result in the snippet you should observe it in full page and also when you see the result through jsfiddle there at the result section there is bar downward which hide some part of footer
As the title specifies: I have a number of divs in a column layout, and I would like them to expand to match the original height of the parent.
The parent doesn't have a fixed height, as it is part of a flex-based page layout.
Is this possible? In the attached example, I would like both .child divs to be equal in height, and the same height as the original height of the parent.
I can believe that it is impossible based on the way that CSS works.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
You may imbricate flex boxes.
body {
margin: 0;
}
.container ,.parent{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent, .child {
flex: 1;
min-height:auto;
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
For the other part of the question : the same height as the original height of the parent. sibblings or parent of .container looks like missing to visualize how height is applied or comes from.
Could be something alike:
body {
margin: 0;
}
.container,
.parent {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
min-height: auto;
overflow: auto;
}
.child {
flex: 1;
min-height: 100%;
border: 1px solid black;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
edit , from comment
For chrome, A bit of js can used to set a usable min-height value for that browser (and others).
let MyParent = document.querySelector('.parent');
let MyParentH = MyParent.offsetHeight;
MyParent.style.setProperty("--MyHeight", MyParentH +"px");
body {
margin: 0;
}
.container,
.parent {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
min-height: auto;
overflow: auto;
}
.child {
flex: 1;
min-height: 100%;/* where var css is not supported */
min-height:var(--MyHeight, 100%);
border: 1px solid black;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
give 100% of the parents width to its children.
.parent {
display: 'flex';
flex-direction: column;
height: 100%;
}
.child {
border: 1px solid black;
height: 100%;
}
Do you want something like that?
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
display: flex;
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
PS: Update my answer with comment advice
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
display: flex;
flex-direction: column;
}
.child {
border: 1px solid black;
flex-grow: 1;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
When scrolling down the .parent div you should see its red background at the bottom due to the padding-bottom. This works in Chrome, but not in Safari and Firefox.
.container {
display: flex;
width: 200px;
height: 500px;
}
.parent {
display: flex;
flex-direction: column;
background: red;
padding-top: 20px;
padding-bottom: 20px;
overflow: auto;
flex: 1;
}
.child {
flex: 1 0 100px;
background: green;
border: 1px solid blue;
}
<div class="container">
<div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
</div>
</div>
codepen: http://codepen.io/anon/pen/NpvJPY
Edit: This question is different from the proposed duplicate because it regards a problem with a fixed padding in pixels, as opposed to the percentage padding in the duplicate.
I'm not exactly sure why the padding-bottom fails in Firefox and Safari. It may have something to do with the container being over-constrained. But that's just a guess.
What I am more certain about, however, is a reliable, cross-browser solution. Pseudo-elements on a flex container are rendered as flex items. So instead of padding use ::before and ::after.
.container {
display: flex;
width: 200px;
height: 500px;
}
.parent {
display: flex;
flex-direction: column;
background: red;
/* padding-top: 20px; */
/* padding-bottom: 20px; */
overflow: auto;
flex: 1;
}
/* NEW */
.parent::before,
.parent::after {
flex: 0 0 20px;
content: '';
}
.child {
flex: 1 0 100px;
background: green;
border: 1px solid blue;
}
<div class="container">
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
</div>
revised codepen
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I have the following (simplified) html & css:
<div class="container">
<div class="one">Some text for div 1</div>
<div class="two">Some text for div 2</div>
</div>
<style>
.two {float: right}
</style>
When both elements fit together in their container, I want it to look like;
Some text for div 1 Some text for div 2
However when they do not fit next to each other I want the second div's float to be removed, like;
Some text for div 1
Some text for div 2
How can I achieve this?
Flexbox can do that;
.parent {
border: 1px solid red;
margin: 1em auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.skinny {
width: 60%;
}
.left {
height: 50px;
background: green;
flex: 0 0 250px
}
.right {
height: 50px;
background: pink;
flex: 0 0 250px;
}
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="parent skinny">
<div class="left"></div>
<div class="right"></div>
</div>
my variant without flexbox and more cross-browser
.container{
font-size: 0;
text-align: justify;
}
.container::after{
content: "";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
.class-1, .class-2{
display: inline-block;
font-size: 14px;
text-align: left;
}
<div class="container">
<div class="class-1">Some text for div 1</div>
<div class="class-2">Some text for div 2</div>
</div>