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.
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 have this markup:
<div id="wrapper">
<div id="container">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
and this CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#container {
width: 200%;
}
.block {
width: 50%;
float: left;
}
Basically all I want to do is, have 2 fullwidth divs floating next to each other, but when I put some content in them I get container centered and pieces of both divs showing, like this: http://prntscr.com/8lr4l6
What am I doing wrong?
There is no need to set the width of the wrapper and of the container. It is always 100%, if nothing else is set. Just set a width of 50% to every block and float them left.
#wrapper {
overflow: hidden;
}
.block {
float: left;
width: 50%;
}
Example
would something like this work for you: http://jsfiddle.net/swm53ran/338/
you can see the div to by commenting out overflow: hidden
<div class="container">
<div class="block block1">
This is content for div 1 This is content for div 1 This is content for div 1
</div>
<div class="block block2">
This is content for div 2 This is content for div 2 This is content for div 2
</div>
</div>
body {
overflow: hidden;
}
.container {
width: 200%;
padding: 0px;
}
.block {
display: inline-block;
width: 50%;
float: left;
outline: 1px solid gray;
}
Boy, am I a fool!?
In my case answer was pretty simple. I had left autofocus attribute on my input which were on the off screen div, and of course it automatically scrolled to that div.
Thanks everyone for answers though. :)
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}
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/
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}