Using the following my .divider <div> is not showing. I guess this is because it is empty. If I add a "." in there, then I see it. Is it possible to make it 100% the height of the .wrapper without adding content?
.wrapper {
display: flex;
background-color: orange;
}
.left {
background-color: gray;
}
.divider {
background-color: green;
cursor: ew-resize;
width: 12px;
height: 100%;
}
.right {
flex-grow: 1;
background-color: yellow;
}
<div class="wrapper">
<div class="left">Left</div>
<div class="divider"></div>
<div class="right">Right</div>
</div>
https://jsfiddle.net/sub7fxk5/
Remove height: 100%; for .divider
.wrapper {
display: flex;
background-color: orange;
}
.left {
background-color: gray;
}
.divider {
background-color: green;
cursor: ew-resize;
width: 12px;
/* height: 100%; */
}
.right {
flex-grow: 1;
background-color: yellow;
}
<div class="wrapper">
<div class="left">Left</div>
<div class="divider"></div>
<div class="right">Right</div>
</div>
Removing the height and adding flex: 1 seems to help.
Is the result of the code below what you expect it to be?
The wrapper has no height, that means that setting a height to 100% would equal setting the height to 0.
the flex: 1 makes the item flexible even though it has no content and it shows.
Of course you can set a width too. So width: 12px would work. As would width: 100%; (which would push the left and right item to the other side)
You might also use a pseudo-element ::after as a divider. That would clean up your html a bit.
.wrapper {
display: flex;
background-color: orange;
}
.left {
background-color: gray;
}
.divider {
background-color: green;
cursor: ew-resize;
flex: 1;
}
.right {
flex-grow: 1;
background-color: yellow;
}
<div class="wrapper">
<div class="left">Left<br/><br/>Left</div>
<div class="divider"></div>
<div class="right">Right</div>
</div>
Related
I've got such an issue:
I want to increase hovered div width with simultaneously width decrease of his siblings. Everything works fine without setting transition property.
If I set transition and move mouse quickly. My divs don't fully fill their parent.
Here's my code:
#parent {
display: block;
position: relative;
}
#parent .child {
float: left;
height: 300px;
width: 20%;
background-color: red;
transition: width .5s;
}
#parent .child:nth-child(2) {
background-color: grey;
}
#parent .child:nth-child(3) {
background-color: green;
}
#parent .child:nth-child(4) {
background-color: yellow;
}
#parent .child:nth-child(5) {
background-color: brown;
}
#parent:hover .child {
width: 17.25%;
}
#parent:hover .child:hover {
width: 31%;
}
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
Do you have any ideas how to solve this problem? Can I fix it with pure CSS or I should use javascript for it?
Perhaps using Flexbox would give you a smoother effect.
You can adjust the flex property as you need to get the dimensions right.
body,
html {
/* for demo purposes */
padding: 0;
margin: 0;
}
#parent {
display: flex;
}
#parent .child {
height: 300px;
flex: 1 1 auto;
background-color: red;
transition: all .5s;
}
#parent .child:nth-child(2) {
background-color: grey;
}
#parent .child:nth-child(3) {
background-color: green;
}
#parent .child:nth-child(4) {
background-color: yellow;
}
#parent .child:nth-child(5) {
background-color: brown;
}
#parent .child:hover {
flex: 2 1 auto;
}
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
I am trying to make a nested 100% screen layout but I am running into a problem where the nested container does not fill 100% of the space of the parent cell in safari, even tho the cell itself does expand to fill all the available space. If I make the subContainer the actual flex cell as well it works, but I can´t do that for practical reasons. Any ideas?
jsfiddle
HTML:
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
CSS:
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
}
#left {
background: red;
width: 50;
}
#right {
background: green;
flex: 1;
}
This is a workaround for this problem in Safari.
Since Safari seems to avoid calculation for non-flex nested containers.
Take a look to this answer
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
position: relative;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
#left {
background: red;
width: 50px;
}
#right {
background: green;
flex: 1;
}
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
I am trying to make a full height page using flexboxes, where the content also uses a flexbox. The page should look as follows example of what it should look like. The blue div is dynamic and could change in height and the red content should take up the remaining space of the content div. This works on both Firefox and IE, however on Chrome it overflows. Can somebody explain why it overflows on Chrome?
The HTML is as follows:
<body>
<div class="container">
<div class="navbar">Navbar</div>
<div class="content">
<div class="container">
<div class="fill"></div>
<div class="dynamic">Here is some dynamic content<br>Test</div>
</div>
</div>
</div>
</body>
And the CSS is:
body{
margin:0;
}
.container{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.navbar{
background-color: #ccc;
flex: none;
}
.content{
background-color: #333;
flex: auto;
padding: 10px;
}
.dynamic{
background-color: #0066ff;
flex: none;
}
.fill{
flex: auto;
background-color: #ff0000;
}
Here is an updated snippet.
Use flex:1 for the container that needs to adjust the height automatically.
body {
margin: 0;
}
.container1 {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
.navbar {
background-color: #ccc;
}
.content {
flex: 1;
background-color: #ff0000;
border: 10px solid #333;
border-bottom: none;
}
.dynamic {
background-color: #0066ff;
border: 10px solid #333;
border-top: none;
}
<body>
<div class="container1">
<div class="navbar">Navbar</div>
<div class="content">
</div>
<div class="dynamic">Here is some dynamic content
<br>Test</div>
</div>
</body>
I'm trying to put 3 divs in the same row as the following code.
My CSS and HTML:
.row {
display: table;
width: 100%
}
.row > div {
display: table-cell;
height:30px; /*demo purposes */
}
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"> here I have an accordion </div>
<div id="middle-bar"> heve a have my canvas </div>
<div id="right-bar"> and here I have an editor</div>
</div>
Somehow the content of the middle-bar(my canvas) is positioned in the correct place, but the other two divs contents are in the bottom of the page as you can see here see photo. Do you guys know why this is happening?
After discussing the project further with you in the comments, and in chat, I think you should take an approach that uses flexbox instead. The code is fairly straight forward:
.container {
display: flex;
}
.left { flex-basis: 10%; background: #F99; }
.right { flex-basis: 20%; background: #99F; }
.middle { flex-basis: 70%; background: #9F9; }
<div class="container">
<div class="left">L</div>
<div class="middle">C</div>
<div class="right">R</div>
</div>
I only managed width.
There's nothing problematic see this.
.row {
display: table;
width: 100%
}
.row > div {
display: table-cell;
height:30px; /*demo purposes */
}
#left-bar {
width: 20%;
background-color: #FF0000;
}
#middle-bar {
width: 60%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"> here I have an accordion </div>
<div id="middle-bar"> heve a have my canvas </div>
<div id="right-bar"> and here I have an editor</div>
</div>
http://jsfiddle.net/hqu8N/
<div id="container">
<div id="one"><p>one</p></div>
<div id="two"><p>two</p></div>
<div id="footer"><p>footer</p></div>
</div>
#container {
display: table;
width: 200px;
height: 200px;
background-color: red;
border-spacing: 5px;
}
#one {
display: table-cell;
background-color: yellow;
}
#two {
display: table-cell;
background-color: blue;
}
#footer {
display: table-footer-group;
background-color: green;
}
Basically i want the green footer to extend over to the end of the blue ID. And also between the green footer and the yellow ID it's 10 px of space instead of 5px. What am i doing wrong ?
I used grid for your case, and a grid-gap for a 5px distance:
#container {
display: grid;
grid-gap: 5px;
width: 200px;
height: 200px;
background-color: red;
}
#one {
background-color: yellow;
}
#two {
background-color: blue;
}
#footer {
background-color: green;
grid-column: 1 / 3;
}
<div id="container">
<div id="one">
<p>one</p>
</div>
<div id="two">
<p>two</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
https://jsfiddle.net/arman1373/4xkgd5Lj/
I had the same issue with both the header-group and footer-group.
I solved this by putting a container around my table which specified the basic width. Inside that I put a div with display: table properties as below
#tContainer {
width: 80%;
margin; 0% auto;
}
#tData {
display: table;
width: 100%
}
.tDataRow {
display: table-row;
}
.tDataRow span{
display: table-cell;
}
I didn't use table-header or table-footer but defined them separately:
.tDataFooter {
display: block;
width: auto;
}
And the element structure as follows:
<div id="tContainer">
<div id="tData">
<div class="tDataRow"><span class="dHeader"> xyz </span></div>
<div class="tDataRow"><span> data sets repeat </span></div>
</div>
<div class="tDataFooter"> Footer data </div>
</div>
I am hoping someone else has a neater solution but I couldn't get the header and footer to fit at all, not even the header columns to align with the data
Result:
Resulting table sample