I have have this following snippet and was wondering if anyone can help get the overflow corrected so the element with id "list" can be scrolled vertically while sized to the same height as the first two divs. Thank you!
#parent {
display: flex;
overflow: hidden;
}
#first, #second {
height: 200px;
width: 150px;
border: solid;
}
#list {
overflow-y: auto;
}
.item {
border: solid;
height: 150px;
width: 150px;
}
<div id="parent">
<div id="first">
</div>
<div id="second">
</div>
<div id="list">
<div class="item">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
<div class="item">
item 4
</div>
</div>
</div>
For that you need to restrict the height of #list and use overflow-x: hidden; on it. Then it will scroll. Note the width: 165px setting for #list to allow the border to be not covered by the scrollbar.
* {
box-sizing: border-box;
}
#parent {
display: flex;
}
#first,
#second {
height: 200px;
width: 150px;
border: solid;
}
#list {
overflow-x: hidden;
height: 200px;
width: 165px;
}
.item {
border: solid;
height: 150px;
width: 150px;
}
<div id="parent">
<div id="first">
</div>
<div id="second">
</div>
<div id="list">
<div class="item">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
<div class="item">
item 4
</div>
</div>
</div>
Related
I want to have the span tag inside the div with the item class innerHTML to not cause a line break no matter its length. I also do not want to have the innerHTML that goes beyond the item width to overlap but be hidden. I have tried using CSS display, overflow and I have had no luck with preventing any line break. I have had success with ensuring no text overlaps when it goes beyond the item width.
#list {
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
width: 200px;
}
.item {
width: 100%;
}
.item-div {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
.item-span {
overflow: hidden;
}
<div id="list">
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item ----------------------------------------------------------------------------------------------------</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
</div>
You're looking for white-space: nowrap on .item-span:
#list {
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
width: 200px;
}
.item {
width: 100%;
}
.item-div {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
.item-span {
white-space: nowrap;
}
<div id="list">
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item ----------------------------------------------------------------------------------------------------</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
</div>
I am trying to create a section on my page that will contain inline-block divs (that would of various lengths). This outer div will be scales with the width of its parent (the parent has col-md-8). I'm trying to see if it's possible to float all the inner individual divs left with a right margin and have them disappear off to the right edge of the parent div. Clearly I'm missing something as these are not lining up the way I want them to.
.outer {
position: relative;
width: 330px;
height: 140px;
overflow-y: hidden;
background-color: red;
}
.box {
display: block;
height: 130px;
float: left;
margin-right: 20px;
background-color: grey;
border: 1px solid #333;
}
.box-1-col {
width: 130px;
}
.box-2-col {
width: 260px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="outer clearfix">
<div id="box-1" class="box box-2-col">
This is box 1
</div>
<div id="box-2" class="box box-1-col">
This is box 2
</div>
<div id="box-3" class="box box-1-col">
This is box 3
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/xc66s1L8/4/
I have modular grid of cards with and without image, based on flexbox.
Normally cards without image are 50% of the width, cards with image are 100% of the width, and those cards without image that doesn't have a pair are also 100%.
----------------
[[ txt ][ img ]] – card with an image
----------------
[ txt ][ txt ] – 2 cards without image
----------------
[ txt ] – card without image
----------------
[[ txt ][ img ]] – card with an image
----------------
Is it possible to maintain ratio of the cards and its content while resize, and also maintain modularity with css?
Here's the code
that let me maintain ratio, but when I try to apply this technique to cards children everything breakes
<div class="wrapper">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
.wrapper
display: flex
flex-wrap: wrap
justify-content: space-between
width: 620px
.card
height: 0
padding-bottom: 50%
display: flex
flex-direction: row
justify-content: space-between
flex: 1 1 300px
.has-card-image .card-text,
.has-card-image .card-image
height: 300px
width: 300px
I can see one way this could be done w/o script.
Either as in this case, using px values, or e.g. using vw, and the reason is that the card-text and card-image needs to know the wrapper's width to be able to size according to the expected output (which mean percent can't be used).
Fiddle demo
Stack snippet
.wrapper {
display: flex;
flex-wrap: wrap;
width: 600px;
}
.card {
display: flex;
flex: 1 300px;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 300px;
}
.card .card-text:only-child {
flex: 1 300px;
}
/* demo styles */
.card .card-text, .card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
If you need the margin, you'll need an extra wrapper
Fiddle demo
Stack snippet
.wrapper {
width: 620px;
overflow: hidden;
}
.inner {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.card {
display: flex;
flex: 1 300px;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 300px;
margin-left: 20px;
}
.card .card-text:only-child {
flex: 1 300px;
}
/* demo styles */
.card .card-text,
.card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="inner">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
</div>
Updated
Here is a version using vw and margin, and is responsive.
Note, the make up for margin set on the wrapper can also be set on each item, though I found it simpler like this.
Fiddle demo
Stack snippet
.wrapper {
width: calc(80vw + 20px); /* 20px extra for margin */
margin: 0 auto;
overflow: hidden;
}
.inner {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.card {
display: flex;
flex: 1 40vw;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 40vw;
margin-left: 20px;
}
.card .card-text:only-child {
flex: 1 40vw;
}
/* demo styles */
.card .card-text,
.card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="inner">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
</div>
I have a CSS menu using the checkbox:checked trick here
But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other along?
I have looked at Flexible Boxes, I have never used them before, but feel this could be the right track.
I have created a JSFiddle that illustrates what I am trying to do.
Thank you :)
EDIT
I've done some experimenting and it is the magic combination of padding and box-sizing - I've also just stumbled upon this useful post => International box-sizing Awareness Day
EDIT
HTML:
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>
</div>
CSS:
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: left 1s;
left: 250px;
}
#container {
position: relative;
transition: left 1s;
left: 0px;
width: 100%;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
The problem is that you are moving the left value of offset menu, which moves the menu item to left 250px. Similar thing will occur if you use margin-left property, because of width:100%.
instead, if you increase the padding, which will cause the increment inwards and reduce width of parent container, causing the item elements to fall on next life if no space is found.
Check the below snippet, where i am changing the padding value
* {
box-sizing: border-box;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: padding 1s;
padding-left: 250px;
}
#container {
position: relative;
transition: padding 1s;
left: 0px;
width: 100%;
padding-left: 0;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
The problem is that you're moving the whole container so everything inside it moves too.
What you actually want to do is move the first .item.
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
As per your JSFiddle example you have to change few properties :
HTML : one line has to added for clear the floating
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div style="clear:both"></div>
</div>
</div>
And the CSS would be :
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
transition: margin-left 1s;
margin-left: 0px;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
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/