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>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
In flexbox, if you set flex-flow: column nowrap and the elements inside have non-zero value of flex shrink, they should shrink down to all fit inside the flex container.
I have found that if you have only one item in this container and it has content bigger than the flex-container then it will not shrink down. But if other elements are included in the container (if it is not the only item) then it will shrink down.
Best visualized in this CodePen.
Here is the same code from the CodePen.
.container {
padding: 10px;
height: 100px;
width: 100px;
background: red;
margin: 5px 20px;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.item {
width: 80px;
height: 40px;
background: blue;
margin: 5px;
/* same as
flex: 1 1 40px;
*/
}
.super.item {
height: 200px;
}
.item div {
width: 10px;
height: 150px;
background: black;
}
body {
margin: 0;
display: flex;
}
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'>
</div>
</div>
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'>
<div></div>
</div>
</div>
<div class='container'>
<div class='item super'>
</div>
</div>
<div class='container'>
<div class='item super'>
<div></div>
</div>
</div>
Is there an explanation on why that last div does not shrink to fit the flex container?
What about making the height of those contents inherit their parent's one?
.super.item {
height: inherit;
}
.item div {
width: 10px;
height: inherit;
background: black;
}
Snippet below, is that what you're trying to achieve? :
.container {
padding: 10px;
height: 100px;
width: 100px;
background: red;
margin: 5px 20px;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.item {
width: 80px;
height: 40px;
background: blue;
margin: 5px;
/* same as
flex: 1 1 40px;
*/
}
.super.item {
height: inherit;
}
.item div {
width: 10px;
height: inherit;
background: black;
}
body {
margin: 0;
display: flex;
}
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'>
</div>
</div>
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'>
<div></div>
</div>
</div>
<div class='container'>
<div class='item super'>
</div>
</div>
<div class='container'>
<div class='item super'>
<div></div>
</div>
</div>
I don't know if you are talking about it or not.
Your div is taking width and height as item.
so whenever you add another div it will add height of 150px.
.item div{
width: 10px;
height: 150px;
background: black;
}
Very simple rule for items of a flexbox:
Items grow value is 0 and shrink is 1 and the base-case is auto.
flex: 0 1 auto
So
.item{
width: 80px;
height: 40px; # will be used as base-case
background: blue;
margin: 5px;
/* same as
flex: 1 1 40px;
*/
}
Why does second container's item shrink? Easy. base-case is 40px or on the other hand it dose not have the class .super. Add .super and see what happens.
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'> # flex's item height: 40px;
<div></div> # regular div
</div>
</div>
Why the third container that has the class .super does shrink? while height: 200px and it should overflow? Easy. it is the same as: flex: 0 1 200px (this is not quite right, see the comment below, what #TemaniAfif has pointed out)
try it:
.super.item{
/* height: 200px; */
flex: 0 1 200px; # equal to height: 200px
}
now try this:
.super.item{
/* height: 200px; */
flex: 0 0 200px; # turn off auto grow / shrink
}
Why the fourth overflows?. Easy. the item has a child that is a regular div
<div class='container'>
<div class='item super'> # flex's item
<div></div> # regular div
</div>
</div>
and the height of this div is 150px
.item div{
width: 10px;
height: 150px; # remove this one, it shrinks
background: black;
}
I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.
You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>
NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I am trying to use a flexbox approach to create a layout that will resize the header width and content dimensions when a window is resized, but maintain the sidebar dimensions.
I found the following example from this Flexbox Approach to get me started, and it works as desired for the content div itself. But after looking it over, I'm unsure how to make it work as described with a fixed width, 100% height sidebar.
CSS from example:
<style>
html, body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ }
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
HTML from example:
<div class="row header">
<p><b>header</b> <br /> <br />(sized to content)</p>
</div> <div class="row content">
<p> <b>content</b> (fills remaining space) </p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
The following codepen example gave me the information I needed to get my layout working:
http://codepen.io/JosephSilber/pen/HqgAz
CSS:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: -webkit-min-content;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
.column > div {
height: 2000px;
background: red;
}
.column:nth-child(2) > div {
height: auto;
}
/* All of these are just for this demo's design. */
body {
font-family: sans-serif;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
}
.header {
text-align: center;
color: #fff;
background: #444;
}
.sidebar {
background: #666;
padding: 4px 20px;
color: #fff;
}
.page-header {
padding: 6px 20px;
background: #004141;
color: #fff;
font-size: .8em;
}
.content {
background: #ddd;
}
HTML:
<div class="header">Main header</div>
<div class="body">
Move this: <div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="box">
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
</div>
</div>
</div>
To here: <div class="sidebar">Sidebar</div>
</div>
To get the sidebar on the right side, I simply moved <div class="sidebar">Sidebar</div>to just above the closing div tag for the .body class.
I'd like to display four elements side by side. I'm using display: table and display: table-cell to accomplish this:
#container {
width: 960px;
background-color: orange;
height: 400px;
}
#table {
display: table;
table-layout: fixed;
border-spacing: 10px;
width: 100%;
}
div.item {
display: table-cell;
height: 150px;
background-color: blue;
}
<div id="container">
<div id="table">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
</div>
How can I make the rightmost and leftmost cells flush with the container div's edge and maintain equal spacing between the inner cells?
Thank you!
An easy way would be to use border on cells instead of border-spacing. Then you could cancel out border on the first of last cell. Also, keep the colour same as that of your container.
div.item {
display: table-cell;
border: 10px solid orange; /* Same colour as of the container */
border-left: none; /* reset left border to keep uniform */
}
div.item:last-child { border-right: none; } /* remove from last one */
Example Snippet:
#container {
width: 960px;
background-color: orange;
height: 400px;
}
#table {
display: table;
table-layout: fixed;
width: 100%;
}
div.item {
display: table-cell;
height: 150px;
background-color: blue;
border: 10px solid orange;
border-left: none;
}
div.item:last-child { border-right: none; }
<div id="container">
<div id="table">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
</div>
You can remove the table div and make container display: flex with space-between justification.
<div id="container">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
#container {
display: flex;
justify-content: space-between;
}
.item {
background-color: red;
width: 24%;
}
https://jsfiddle.net/kyy7qgLz/2/