I have a parent div with variable width and height and overflow auto, then I have two or more children div with 100% with of parent.
I would like that all the children div have the same width, but when the parent has horizontal scroll, each children have different width.
See the example:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
height: 20px;
background: aqua;
display: inline-block;
white-space: nowrap;
border: 1px solid yellow;
width: 100%;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
Try this
#container {
width: 175px;
background: red;
overflow: auto;
border-collapse:collapse;
}
.table {
width:100%;
display:table;
}
.block {
height: 20px;
background: aqua;
display: table-row;
white-space: nowrap;
border: 1px solid yellow;
}
<div id="container">
<div class="table">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
</div>
Please note that I changed display to table-row which automatically removes the border, but in order to preserve it I added border-collapse:collapse; to #container.
Edit: Added a div with a class "table" + relevant CSS
The solution is:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
background: none repeat scroll 0 0 aqua;
border: 1px solid yellow;
float: left;
height: 50px;
padding: 10px;
width: 175px;
word-break: break-all;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
Related
I have a div in HTML that has two child divs, one on the right and one on the left. Both child divs have contenteditable set, so when the user click in them they can type. However, when the text goes below the size of the div, the parent div overflows and scrolls, but the child divs don't.
Here is an example:
#container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll;
color: white;
background: gray;
}
#part1 {
width: 50%;
margin: 0;
background: blue;
height: 100%;
float: left;
overflow: visible;
}
#part2 {
width: 50%;
margin: 0;
background: green;
height: 100%;
float: right;
overflow: visible;
}
<div id="container">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>
In the above example, try typing more text than can fit vertically (by spamming the enter key while inside the box). Once the text goes over the side of the box, the parent overflows like it is supposed to, however, the children (which are being typed into) don't, even though they have 100% height.
Is there a way to make the children extend WITH the parent, so they both scroll together when one/both overflows?
It is very good for your task to use the rules of flexibility. Add display: flex and flex-flow: wrap for #container. And remove the height: 100% from the children, because flex-flow: wrap itself will stretch the elements to the full height.
Also, remove float: left and overflow: visible from children.
#container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll;
color: white;
background: gray;
display: flex;
flex-flow: wrap;
}
#part1 {
width: 50%;
margin: 0;
background: blue;
/*height: 100%;
float: left;
overflow: visible;*/
}
#part2 {
width: 50%;
margin: 0;
background: green;
/*height: 100%;
float: right;
overflow: visible;*/
}
<div id="container">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>
You could change height to min-height for the inner divs and use an additional inner div with display: flex so that both colored divs have the same growing height. overflow: visible is not necessary.
Working example:
#container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll;
color: white;
background: gray;
}
#inner {
display: flex;
min-height: 200px;
}
#part1 {
width: 50%;
margin: 0;
background: blue;
min-height: 100%;
float: left;
}
#part2 {
width: 50%;
margin: 0;
background: green;
min-height: 100%;
float: right;
}
<div id="container">
<div id="inner">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>
</div>
Since you define some css twice and overflow-x is not necessary you can add a class to the colored divs and set the overflow for the container only to overflow-y.
Working example:
#container {
border: 1px solid black;
width: 300px;
height: 200px;
color: white;
background: gray;
overflow-y: scroll;
}
#inner {
display: flex;
min-height: 200px;
}
.editable {
width: 50%;
margin: 0;
min-height: 100%;
}
#part1 {
background: blue;
float: left;
}
#part2 {
background: green;
float: right;
}
<div id="container">
<div id="inner">
<div class="editable" id="part1" contenteditable="true"></div>
<div class="editable" id="part2" contenteditable="true"></div>
</div>
</div>
I am struggling to make my .centerIt divs be centered vertically, and to have the .div1 stay scrollable after I add more .centerIt divs into the column.
The .centerIt divs have to keep their height: 20px and not squeeze after I add more of them.
JSFiddle example
.container {
display: flex;
background: red;
width: 300px;
height: 300px;
}
.div1 {
background: yellow;
height: 90%;
width: 27%;
margin: 5px;
overflow-y: scroll;
}
.div2 {
background: blue;
height: 90%;
width: 74%;
margin: 5px;
}
.centerIt {
background: green;
width: 100%;
border: solid 1px black;
height: 20px;
color: green;
}
<div class="container">
<div class="div1">
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
</div>
<div class="div2"></div>
</div>
Just try to add min-height: 20px to .centerIt instead of height and
display: flex;
flex-direction: column;
justify-content: center;
to .div1 styles, should do it.
JSFiddle fork
I can't figure out how to keep multiple divs inline if their width exceeds container width.If the width of all divs is about 1000 px and the container's width is 500 , i want the divs to be overlapped by container , and a horizontal scroll bar to show up.
#container {
overflow: hidden;
background: red;
width: 500px;
height: 500px;
}
#container>div {
border: 1px solid #000;
width: 30%;
height: 100px;
margin: 10px;
float: left;
}
<div id="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<br style="clear: both;">
</div>
Fiddle: Click
Don't use float, use inline block with container set to nowrap for white space, and then add overflow: auto; to the container to trigger the scrollbar as needed.
jsFiddle
#container{
white-space: nowrap;
overflow: auto;
}
#container>div{
display: inline-block;
}
Add some CSS
#container {
background: red none repeat scroll 0 0;
height: 200px;
overflow: auto;
white-space: nowrap;
width: 500px;
}
#container > div {
border: 1px solid #000;
display: inline-block;
height: 100px;
margin: 10px;
width: 30%;
}
http://jsfiddle.net/WGCyu/1325/
As Pangloss says, don't use float, but display them inline. And use overflow-x:scroll
#container {
overflow: hidden;
background: red;
width: 500px;
height: 500px;
white-space: nowrap;
overflow-x:scroll
}
#container>div {
border: 1px solid #000;
width: 30%;
height: 100px;
margin: 10px;
display: inline-block;
}
<div id="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<br style="clear: both;">
</div>
I have a parent div of unknown width (the width depend on some screen width calculations). The number of the child divs is 4 and are floated so that they are horizontally aligned. The 1st, 2nd and 4th are good candidates for fixed width value. However, the 3rd element can stretch to fit the remaining space in the parent div.
I don't know why the approach of display:table; for parent and display:table-cell for children didn't work for me. The three element's width is fixed except for the concerned div where I also tried width:auto to no avail.
<div class="parent">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
</div>
A minimal CSS:
.parent
{
width: 100%;
display:table;
}
.first
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.second
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.third
{
height: 80px;
float: left;
display: table-cell;
}
.fourth
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
Your usual help is much appreciated.
You can do this with Flexbox, so if you add flex: 1 to one child div it will take rest of free width
.parent {
display: flex;
border: 1px solid black;
}
.child {
border: 1px solid black;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
flex: 1;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
Or you can use CSS Table with table-layout: fixed here is Browser support
.parent {
display: table;
width: 100%;
border: 1px solid black;
table-layout: fixed;
}
.child {
border: 1px solid black;
display: table-cell;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
width: 100%;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
For IE9+
You can use inline-block and calc() for this.
Snippet
body {
margin:0
}
.parent {
border:solid black;
font-size:0; /*fix inline-block gap*/
}
.child {
border: 1px solid red;
margin: 5px;
width:100px;
display:inline-block;
font-size:16px /*restore font -size*/
}
.calc{
width: calc(100% - 348px)
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child calc">three</div>
<div class="child">four</div>
</div>
For IE8+
you can use display:table/table-cell
Snippet
body {
margin: 0
}
.parent {
border: solid black;
display: table;
table-layout: fixed;
width: 100%;
/*optional*/
border-collapse:separate;
border-spacing:5px;
box-sizing:border-box;
}
.child {
border: 1px solid red;
width: 100px;
display:table-cell;
}
.big {
width:100%
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child big">three</div>
<div class="child">four</div>
</div>
I have a div with class container. I have 3 more divs inside .container. What I want is to display internal divs float: left so that 2 divs tags are visible inside .container and the third one is invisible and is placed on the right side of first 2 div tags which are visible. I am trying the following code but it makes all tags visible all the time.
jsfiddle
<div class="container">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
css
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
}
.div {
width: 200px;
height: 200px;
background: blue;
float: left;
border: 1px solid red;
}
I want above to look like this
You can do as such in other way,
HTML
<div class="container">
<div class="innerContainer">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</div>
CSS
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
}
.innerContainer {
position: relative;
width: 605px;
height: 500px;
overflow: hidden;
}
.div {
width: 200px;
height: 200px;
background: blue;
float: left;
border: 1px solid red;
}
Check over here http://jsfiddle.net/nftp6/8/
Use:
display: inline-block;
white-space: nowrap;
For that effect
Fiddle:
http://jsfiddle.net/Hive7/nftp6/5/
Use display:inline-block instead of float and set white-space:nowrap to the container:
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.div {
width: 200px;
height: 200px;
background: blue;
display: inline-block;
border: 1px solid red;
}
Demo fiddle
Now you'll most likely face some white-space issues, read this answer for multiple ways to handle that