I'm trying to create a list of boxes that moves horizontally, but at the end of the first line it goes for the second line.
.container {
white-space: nowrap;
overflow-x: auto;
}
.box {
max-width: 98%;
min-width: 150px;
background-color: #F4D989;
float: left;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Remove float from .box, and add display: inline-block;, as white-space only works on inline level elements.
Your code works fine. Put your boxes in a div class other than the main container. Try the below code:
.box-wrap {
white-space: nowrap;
overflow-x: auto;
}
.box {
max-width: 98%;
min-width: 150px;
background-color: #F4D989;
float: left;
}
<div class="box-wrap">
<div class="box" style="width: 100px;height:100px;background-color: red;"></div>
<div class="box" style="width: 100px;height:100px;background-color: black;"></div>
<div class="box" style="width: 100px;height:100px;background-color: red;"></div>
</div>
Below is a screenshot of how it works, I used different colors to make each box distinct.
Click to see image
Use
.container{
white-space:nowrap;
display: inline-flex
overflow-x:auto;
}
Related
I'm having problems with the attibute "word-wrap:break-word;" when trying to align horizontally with another DIV and its inside a DIV. Easy to understand my problem seeing this two examples:
#container {
height: auto;
overflow: hidden;
}
#left {
background-color: green;
width: 120px;
height: 20px;
overflow: hidden;
}
#right {
width: calc(100% - 120px);
float: right;
height: auto;
display: inline-block;
word-wrap: break-word;
background-color: red;
}
<div id="container">
<div id="right">AAAAAAAAAAAAAAAAAAAAA</div>
<div id="left"></div>
</div>
http://jsfiddle.net/galacticpower/a3nyxhtj/4/
Here, if the navigator is resized, the right div text is broken as needed! Yeah!
Adding a div inside the right div and its style comes the problems...
#inside_right{
width: auto;
display: inline-block;
word-wrap:break-word;
background-color: yellow;
}
<div id="container">
<div id="right">
<div id="inside_right">AAAAAAAAAAAAAAAAAAAAA</div>
</div>
<div id="left"></div>
</div>
http://jsfiddle.net/galacticpower/a3nyxhtj/3/
Here if the navigator is resized the "word-wrap:break-word" attribute is lost. The text is not broken! I need to apply some style in a div inside the right div without losing this behaviour.
To summ up, I want that the words were broken in the second example...
Any ideas?
Thank you so much!
Simply apply max-width: 100% to force the letters to actually break inside the inline-block #inside_right
#container {
height: auto;
overflow: hidden;
}
#left{
background-color: green;
width: 120px;
height: 20px;
overflow: hidden;
}
#right{
width: calc(100% - 120px);
float: right;
height: auto;
display: inline-block;
word-wrap:break-word;
background-color: red;
}
#inside_right{
width: auto;
display: inline-block;
word-wrap:break-word;
background-color: yellow;
max-width: 100%;
}
<div id="container">
<div id="right">
<div id="inside_right">
AAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<div id="left"></div>
</div>
The problem is in "display". You use:
#inside_right{display: inline-block;}
And browser thinks that all the text inside this div is only one symbol.
you may use display: block and work with width of inside div.
This should help!
Lose the 'display: inline-block' from '#inside_right'. I don't see why you need it on '#right' either, but the property on '#inside_right' is tripping you up.
I want to make it so if the inline blocks inside a container exceed the width of the container they make it stretch rather than dropping down below.
I made a codepen of what I mean: http://codepen.io/anon/pen/pJQWbR
<div class="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css
.container{
overflow: scroll;
}
.content{
height: 100px;
margin: 5px;
background: blue;
display: inline-block;
width: 25%;
}
Trying to make the blue boxes all be on one line.
Add
white-space: nowrap
to the container
So container style becomes:
.container{
overflow-x: scroll;
white-space: nowrap;
}
white-space: nowrap means Sequences of whitespace will collapse into a single whitespace. Text
will never wrap to the next line. The text continues on the same line until a < br > tag is encountered
See the link : "http://codepen.io/anon/pen/xGQXRz"
Try this one. Just change the width of .content class.
.container{
overflow: scroll;
}
.content{
height: 100px;
margin: 5px;
background: blue;
display: inline-block;
width: 17%;
}
<div class="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
I have a list of object with slider - when clicking on right arrow, left param animates to i.e. -500px.
HTML
<div id="container">
<div id="list">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
// more ...
</div>
</div>
styles
#container {
width: 500px;
overflow: hidden;
}
#list {
position: relative;
left: 0px;
}
.item {
float: left;
}
I want #list to fit its content - now it moves overflowed children to the next line.
Setting display: inline-block would work but without parent with fixed width.
How can i achieve this?
You should use white-space: nowrap to #container div.
#container {
width: 500px;
overflow: hidden;
white-space: nowrap;
}
#list {
position: relative;
left: 0px;
}
.item {
float: left;
}
.elem {
background: orange;
width: 200px;
height: 200px;
border: 1px solid #000000;
display: inline-block;
}
<div id="container">
<div id="list">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
// more ...
</div>
</div>
Reference: MDN - white-space
If the slider is customized/created by you, and you know which slide is the active one, you can get the width of the item and set it with javascript/jquery to #list.
Otherwise, if the slider is downloaded, you can try to see if the active one haves an active class, and then get the width with the same method above, getting the width of the active item and set it to the parent ´#list´
Set margin like this:
#list {
margin:0px auto;
width: 80%;
}
This will center the list inside container.
I'm having weird CSS issue.
This jsfiddle shows it well.
HTML:
<div class="container" style="text-align: left;">
<div class="leftBox">
<div class="innerWrapper" style="background: gray;">Left</div>
</div>
<div class="rightBox">
<div class="innerWrapper" style="background: green;">Right</div>
</div>
</div>
<div class="container" style="text-align:center; background:red; ">Weird</div>
CSS:
.container {
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
I don't understand why the lower div consumes the margin between the upper ones.
I expected it to consume only the "row" below the upper two columns.
Tried several different positioning and "voodos" but nothing helped.
Any idea?
Thanks.
You need to clear the element you want on it's own line, see fiddle: http://jsfiddle.net/JT5HL/1/
or CSS:
.container {
clear: both;
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
Either give "clear:both" property to your ".container" class which is the older method.
SEE Fiddle: *http://jsfiddle.net/KjtJu/1/*
Or use the new solution "overflow: hidden;" property to your ".container" class
See fiddle: http://jsfiddle.net/8M3L9/1/
Use <div class="clear"></div> in your html inside the container div
Use .clear{clear:both;} in your css.
HTML:
<div class="container" style="text-align: left;">
...
<div class="clear"></div>
</div>
CSS:
.clear{clear:both;}
DEMO
You can change your innerWrapper to 100%;
.innerWrapper {
width: 100%;
}
This seems to work.
http://jsfiddle.net/JT5HL/4/
<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>
Why not just close the gap in between the left and right by making width: 320px;?
See Fiddle :http://jsfiddle.net/JT5HL/7/
Or you could add a height to the container like this height: 20px; this will get rid of the red in the space.
See Fiddle : http://jsfiddle.net/JT5HL/8/
I want to place divs next to each other. I dont't know number of divs, since this is dynamically created and changed. I would like to have one parent div which will have scrollbar in case there are many child divs (and their width is greater than parent).
Here's the jsFiddle example. So, basically I would like to have all this three columns, next to each other and with scrollbar on the bottom of parent div.
HTML:
<div class="content">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
CSS:
content {
width: 100px;
background- color: #355E95;
overflow: visible;
}
.column {
width: 50px;
display: inline-block;
}
Add white-space:nowrap to your parent div.
FIDDLE
You would need to use a content div for the scroll and then a wrapper for the columns, adjusting the width of the wrapper to fit all 3 of your columns (150px in your example).
The column structure is made by floating div's left, but it will float to the width of your parent container, in this case your parent container is only 100px so we need to add a wrapper for them to fit inside.
If you also want a vertical scroll you will need to set a height to your container.
Jsfiddle: http://jsfiddle.net/tYnH3/
css:
.content {
width: 100px;
background-color: #355E95;
overflow: auto;
}
.content-wrapper {
width: 150px;
}
.column {
width: 50px;
float: left;
}
html:
<div class="content">
<div class="content-wrapper">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/bdssw/
use float:left;
.column {
width: 50px;
display: inline-block;
float:left;
}
Try the following JS fiddle
http://jsfiddle.net/jT6SW/1/
#wrapper
{
float: left;
height: 150px;
width: 250px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
use width:auto;
.content {
width: auto;
background-color: #355E95;
overflow:scrolling;
position:fixed;
}
.column {
width: 50px;
float:left;
}
http://jsfiddle.net/XqSJG/6/