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>
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 want to add margin (10px) to .inner-container (blue) which is 960px fixed width which also inside .outer-container (360px fixed width).
To make it scrollable, i set overflow: scroll to .outer-container
to add margin to inner container, I set margin: 10px; to .inner-container.
the problem is there are no margin on the right side of .inner-container.
.outer-container {
width: 360px;
height: 500px;
background: #555;
overflow: scroll;
}
.container-inner {
width: 960px;
height: 300px;
background-color: #0D47A1;
margin: 10px;
}
<div class="outer-container">
<div class="container-inner"></div>
</div>
You can do it, by adding one more div (with 980px width), to wrap inner container, so applied margin will work:
.outer-container {
width:360px;
height: 500px;
background: #555;
overflow-x: scroll;
}
.inner-wrap {
width:980px;
}
.container-inner {
width: 960px;
height: 300px;
background-color: #0D47A1;
margin:10px;
}
<div class="outer-container">
<div class="inner-wrap">
<div class="container-inner"></div>
</div>
</div>
try giving padding to outer container instead of giving margin to inner container.
.outer-container {
width: 360px;
height: 500px;
background: #555;
overflow: scroll;
padding: 10px;
}
.container-inner {
width: 960px;
height: 300px;
background-color: #0D47A1;
display:block
}
You need one more wrap between parent and child div element.
Consider the following markup:
<div class="outer-container">
<div class="middle-container">
<div class="inner-container"></div>
</div>
</div>
And add padding + width on this middle element:
.middle-container {
padding: 10px;
width: 960px;
}
Output Image:
Working Demo:
* {box-sizing: border-box;}
.outer-container {
width: 360px;
height: 500px;
background: #555;
overflow: scroll;
}
.middle-container {
padding: 10px;
width: 960px;
}
.inner-container {
background-color: #0D47A1;
height: 300px;
}
<div class="outer-container">
<div class="middle-container">
<div class="inner-container"></div>
</div>
</div>
I have two divs, an outer div and an inner div inside it. I've set the outer div to have a fixed width (505px) with overflow-x: scroll.
My inner div contains floated left dynamic content (meaning there could be one div or 100) and so could have a width of anywhere between 50px to 5000px. I'm trying to style the inner div so that it can accommodate the dynamic content all on one line but it's not behaving like that; it's hitting the 505px and moving down to the next line. If I give it a width of 5000px, obviously it's working, but the content could be much less than that. What am I doing wrong?
#outer-div {
width: 505px;
height: 100%;
float: left;
background-color: #fff;
overflow-x: scroll;
overflow-y: hidden;
}
#inner-div {
width: auto;
display: inline;
}
.dynamic-content {
width: 62px;
height: 100%;
font-size: 13px;
text-align: center;
float: left;
}
<div id = "outer-div">
<div id = "inner-div">
<div class = "dynamic-content"></div>
<div class = "dynamic-content"></div>
<div class = "dynamic-content"></div>
etc...
</div>
</div>
It's not a width setting..you need to stop the line breaks with white-space:nowrap
#outer-div {
width: 505px;
height: 100%;
float: left;
background-color: #fff;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid grey;
white-space: nowrap;
}
.dynamic-content {
height: 100%;
font-size: 13px;
text-align: center;
display: inline-block;
}
<div id="outer-div">
<div class="dynamic-content">AAAAAAAAAAAAA</div>
<div class="dynamic-content">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div class="dynamic-content">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
etc...
</div>
You can do it with flexbox:
http://codepen.io/anon/pen/grymeG
The inner DIV becomes the flex-container, with flex-wrap:no-wrap to stay in one line and overflow-x: visible;, the dynamic contents get flex-shrink: 0; to not be reduced in width:
#inner-div {
width: auto;
height: 100%;
overflow-x: visible;
display: flex;
flex-wrap: no-wrap;
}
.dynamic-content {
width: 62px;
flex-shrink: 0;
height: 100%;
font-size: 13px;
text-align: center;
}
white-space: nowrap forces the inner elements to stay on the same line, but it won't work with floated element. So you can use display: inline-block but you need to use a trick for the space between the divs (negative margin or html comments between them).
Example :
.outer {
border: 1px solid black;
height: 100px;
width: 500px;
overflow-x: scroll;
white-space: nowrap;
}
.content {
display: inline-block;
margin-left: -4px;
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid red;
}
<div class="outer">
<div class="inner">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
you need to use white-space:no-wrap;
the style will be like this:
#outer-div {
width: 505px;
height: 100%;
float: left;
background-color: #fff;
}
#inner-div {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.dynamic-content {
height: 100%;
font-size: 13px;
text-align: center;
display: inline-block;
}
see your demo here https://jsfiddle.net/IA7medd/o831zdqs/
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>
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