I am trying to animate a few flex items which should collapse just beside one another when they are scaled down.
For example: see this pen.
.flex-cont {
display: flex;
}
.flex-item {
margin: 0 10px;
background: red;
padding: 10px;
transform: scale(0.25);
}
<div class='flex-cont'>
<div class='flex-item'>
Test
</div>
<div class='flex-item'>
Test
</div>
<div class='flex-item'>
Test
</div>
</div>
As you can see the items have a gap between them. I want them to be just beside each other. How can I achieve this?
All you need to do is make your margin negative on .flex-item. From your example, setting it to...
.flex-item {
margin: 0 -13px;
background: red;
padding: 10px;
transform: scale(0.25);
}
did the trick.
EDIT
If you want to maintain the position of leftmost item then...
.flex-item {
margin:0 -46px 0px 10px;
background:red;
padding:10px;
transform:scale(0.25);
}
Related
I've tried several different approaches and I'm pretty sure it's not possible without JS - but before I curl up in a corner I thought I'd give it a try here.
I have one very long navigation div on the left and next to it a column with dynamic content. The first goal is to have the height of the navigation be max the same as the content and overflow the rest.
document.getElementById('add').addEventListener("click", function(e){
e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});
.row {
display: flex;
align-items: flex-start;
}
.left {
background: #ccc;
}
.right {
background: #cc6;
}
<div class="row">
<div class="left">Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
<div class="right">Shorter Content...<br>...<br>
<button id="add">+ add more content</button>
<br>...<br>...<br>...<br><-- Navigation div should always end here</div>
</div>
To make it a bit more interesting the whole thing is in a modal. So my second goal is to get it to work in a div that has overflow: auto itself.
document.getElementById('add').addEventListener("click", function(e){
e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});
.modal {
display: flex;
align-items: flex-start;
max-height: 300px;
overflow: auto;
margin: 10px;
border: 10px solid red;
box-shadow: 0 0 15px grey;
}
.left {
background: #ccc;
}
.right {
background: #cc6;
}
<div class="modal">
<div class="left">Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
<div class="right">Shorter Content...<br>...<br>
<button id="add">+ add more content</button>
<br>...<br>...<br>...<br><-- Navigation div should always end here</div>
</div>
I tried flexbox, positioning, and any combination of max-height, height and min-height that I could come up with but to no success. Do you have any idea how to achieve this without JS?
Oh, and it has to work in IE11... :)
The only way to do this is to position the navigation absolutely but you would need to give the left div a fixed width
document.getElementById('add').addEventListener("click", function(e) {
e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});
.modal {
max-height: 300px;
overflow: auto;
margin: 10px;
border: 10px solid red;
box-shadow: 0 0 15px grey;
}
.modal-inner { /* add this div so backgrounds don't stop when they hit max-height of modal */
display: flex;
}
.left {
background: #ccc;
position: relative; /* add this and give a fixed width */
width: 200px;
}
.absolute {
/* add a div with this class inside the left column */
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.right {
background: #cc6;
flex-grow: 1; /* add this if you want this div to fill the rest of width */
}
<div class="modal">
<div class="modal-inner">
<div class="left">
<div class="absolute">
Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
</div>
<div class="right">Shorter Content...<br>...<br>
<button id="add">+ add more content</button>
<br>...<br>...<br>...<br><-- Navigation div should always end here</div>
</div>
</div>
Can I create a layout like on the picture below, while setting the fixed width only on the parent container? I also cannot use position: absolute; left: 0; right: 0; on Full screen width child, as I cannot remove it from the flow, because it's size is dynamic.
I can't change the markup.
The only solution I can think of is setting the fixed width on every Fixed-width child separately, but as I have a lot of them, that's not the most comfortable solution - means adding a class for every child that I add into the parent container.
Here is an example markup you can post a solution to.
HTML
<div class="fixed-width-container">
<div class="regular-child"></div>
<div class="full-screen-width-child"></div>
<div class="regular-child"></div>
<div class="regular-child"></div>
</div>
CSS
.fixed-width-container {
width: <some-fixed-width>;
}
you can give a try to the flex layout : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
}
div {
border: 1px solid #333;
}
.fixed-width-container {
width: 400px;/* any width set */
margin: auto;
padding: 10px 10px 0;
background: yellow;
display: flex;
flex-flow: column;
align-items: center;
}
.fixed-width-container>div {
height: 3em;
margin-bottom: 10px;
background: lightblue;
min-width: 100%;
}
.full-screen-width-child {
width: 99vw;/* 100vw is fine too */
}
<div class="fixed-width-container">
<div class="regular-child">Fixed-width child</div>
<div class="full-screen-width-child">Full screen width child with dynamic contents</div>
<div class="regular-child">Fixed-width child</div>
<div class="regular-child">Fixed-width child</div>
</div>
codepen to test and play with
This is just an attempt, and probably not a very good one. But maybe it will spawn some more sophisticated solutions by others, or even yourself.
Idea: negative margins for the full-width child.
* {
box-sizing: border-box;
text-align: center;
}
body {
width: 100%;
background: #fff;
}
div {
border: 1px solid #333;
margin-bottom: 10px;
}
div:last-child {
margin-bottom: 0;
}
.fixed-width-container {
width: 70%;
margin: auto;
padding: 10px;
background: LightYellow;
}
.regular-child,
.full-screen-width-child {
height: 45px;
line-height: 45px;
background: LightBlue;
}
.full-screen-width-child {
margin-left: -24%;
margin-right: -24%;
background: LightGreen;
}
<div class="fixed-width-container">
<div class="regular-child">Fixed-width child</div>
<div class="full-screen-width-child">Full screen width child with dynamic contents</div>
<div class="regular-child">Fixed-width child</div>
<div class="regular-child">Fixed-width child</div>
</div>
The problematic part here is the dimension of the negative margins. If you use %, it will relate to the width of the fixed-width-container. Here, I chose width: 70% for it. Given a body width of 625px (as is the case for the Stack Snippet preview) and a margin of -24%, that would give a negative margin of 625px * 0.7 * 0.24 = 105px. I'm not sure what's the best approach of making this work for any configuration.
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)
I'm trying to create a layout where I have three equal-wdith columns (33% width each). However, I want a 15px margin on either side of the middle column.
Please see this jsbin example I've created: http://jsbin.com/usiduy/edit
How can I get the blue column to sit on the right?
Try this css:
body { margin: 0; padding: 0}
#container {
position: absolute;
top: 30px; left: 50px;
bottom: 30px; right: 50px;
border: 1px solid #ccc
}
#container > div {
width: 33%;
height: 100%;
float: left;
}
#container div div {
height:100%;
}
#container div div.a {
background: red;
}
#container div div.b {
background: green; margin:0 15px;
}
#container div div.c {
background: blue;
}
using this HTML:
<div id="container">
<div><div class="a">First</div></div>
<div><div class="b">Second</div></div>
<div><div class="c">Third</div></div>
</div>
If you mean three equal width table columns in sum, you can create a table with three columns, then set padding-left: 15px and padding-right: 15px in the middle column (in td).
You can do like this:
CSS:
.item.first { background: red;width: 33%;float:left; margin-right:15px}
.item.middle { background: green; overflow:hidden;}
.item.last { background: blue;width: 33%;float:right;margin-left:15px}
HTML:
<div id="container">
<div class="item first"></div>
<div class="item last"></div>
<div class="item middle"></div>
</div>
Check live example
http://jsbin.com/usiduy/4/edit#html
Updated:
http://jsbin.com/usiduy/6/edit#html
Because you are mixing fixed pixel widths with percentages, you need to calculate the 33% of the page width minus the 30px of margins on the fly.
This is a JavaScript solution, so a JavaScript savvy contributor should be able to help you out :)
I'm always weak when it comes to positioning divs, but this situation is slightly difficult to find a solution to online. I'm trying to position boxes like so:
_ ___ _
|_|| ||_|
_ | |
|_||___|
Is there a way to avoid defining each one's pixel positions specifically and make them slot into the three columns I've got?
Define three containers for each column, and float them to the left:
<div style="float:left;width:Xpx"></div>
<div style="float:left;width:Ypx"></div>
<div style="float:left;width:Zpx"></div>
Now you can put all your containers in appropriate places in this columns.
take a look at this fiddle: http://jsfiddle.net/rREAh/ is this what you are looking for?
If you need a perfect layout, take a look at the yahoo layout manager: http://developer.yahoo.com/yui/layout/
See: http://jsfiddle.net/qXwKT/
CSS:
.box {
background: #ffffff;
padding: 5px;
border: 1px solid #b3b3b3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#container {
margin: 0 auto;
width: 400px;
background: #ccc;
overflow: hidden
}
#left, #right {
float: left;
width: 75px;
}
#mid {
float: left;
width: 250px;
}
#mid .box {
margin: 0 10px;
border-color: red
}
#left .box {
margin: 0 0 10px 0;
border-color: blue
}
HTML:
<div id="container">
<div id="left">
<div class="box">left 1</div>
<div class="box">left 2</div>
</div>
<div id="mid"><div class="box">mid</div></div>
<div id="right"><div class="box">right</div></div>
</div>
Also take a look at this one: jsfiddle example which has a fluid layout.
And another one without the fixed div in the bottomleft corner.