I want to have one <div> with id that has horizontal scroll, but the problem is it has to be responsive, not with fixed width.
html, body {margin: 0; padding: 0;}
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#myWorkContent a {
display: inline-block;
vertical-align: middle;
}
#myWorkContent img {border: 0;}
<div id="myWorkContent">
<img src="http://placekitten.com/200/200/" height="190">
<img src="http://placekitten.com/120/120/"/>
<img src="http://placekitten.com/90/90/" height="90" width="90">
<img src="http://placekitten.com/50/50/" height="190">
<img src="http://placekitten.com/100/100/">
<img src="http://placekitten.com/200/200/" height="190">
</div><!-- end myWorkContent -->
Thanks to http://jsfiddle.net/clairesuzy/FPBWr/
The problem is with that 530px. I would like to use 100% instead. But then I got page scroll and scroll of the DIV goes right, can not get it, any idea?
Here is article in Serbian about solution
http://www.blog.play2web.com/index.php?id=18
Just set your width to auto:
#myWorkContent{
width: auto;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
This way your div can be as wide as possible, so you can add as many kitty images as possible ;3
Your div's width will expand based on the child elements it contains.
jsFiddle
Below worked for me.
Height & width are taken to show that, if you 2 such children, it will scroll horizontally, since height of child is greater than height of parent scroll vertically.
Parent CSS:
.divParentClass {
width: 200px;
height: 100px;
overflow: scroll;
white-space: nowrap;
}
Children CSS:
.divChildClass {
width: 110px;
height: 200px;
display: inline-block;
}
To scroll horizontally only:
overflow-x: scroll;
overflow-y: hidden;
To scroll vertically only:
overflow-x: hidden;
overflow-y: scroll;
Just make sure you add box-sizing:border-box; to your #myWorkContent.
http://jsfiddle.net/FPBWr/160/
use max-width instead of width
max-width:530px;
demo:http://jsfiddle.net/FPBWr/161/
I figured it this way:
* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }
.red { background: red }
.blue { background: blue }
.yellow { background: yellow }
.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }
<div class="header red"></div>
<div class="wrapper">
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
</div>
I have the wrapper at 1000% and ten pages at 10% each. I set mine up to still have "pages" with each being 100% of the window (color coded). You can do eight pages with an 800% wrapper. I guess you can leave out the colors and have on continues page. I also set up a fixed header, but that's not necessary. Hope this helps.
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 code:
<div id="main_wrapper" style="width: 80vw; overflow: hidden;">
<div id="inner_wrapper" style="position: relative;">
<div id="red" style="background-color: red;width: 20vw;height: 100px;position: absolute;left: 80vw;"></div>
<div id="blue" style="background-color:blue; height:100px; margin: 0px 1% 0px 1%;"></div>
</div>
</div>
Here is the js-fiddle: https://jsfiddle.net/omriman12/msrpwnym/1/
Basically the main_wrapper over-hidden's inner_wrapper, and what i want to do is to align red to the right of blue element.
My problem is that red gets over-hidden when i use relative.
I must keep it relative! This is part of the question, dont change the structure!
Here is what i am actually trying to create:
Try this. The problem is that you set #main_wrapper to width: 80vw and overflow-x: hidden. That caused any child will be hidden if those children are wider than 80vw. You have to wide #main_wrapper to 100vw and set the width #inner_wrapper with 80vw for displaying child of #main_wrapper.
By the way, you need to dynamically resize the width of #main_wrapper when each row is clicked as below snippet.
$('.row').click(function() {
$(this).toggleClass('selected');
if($(this).hasClass('selected')) {
$('#main_wrapper').width('100vw');
} else {
$('#main_wrapper').width('80vw');
}
});
#main_wrapper{
width: 80vw;
overflow-y: scroll;
overflow-x:hidden;
}
#inner_wrapper{
position: relative;
width: 80vw;
}
#blue{
background-color:blue;
height:100px;
margin: 0px 1% 0px 1%;
}
#red{
background-color: red;
width: 20vw;
height: 100px;
position: absolute;
left: 80vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main_wrapper">
<div id="inner_wrapper" class="row">
<div id="red" ></div>
<div id="blue"></div>
</div>
</div>
I'm trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser.
I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....
The html:
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
The css:
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
.itemwrapper {
display: inline;
}
img {
max-width: 100%;
height: auto;
}
use display table to set it side by side and keep it side by side and responsive.
display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;
this will not only keep them the same width but also keep the containers the same height.
vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.
Any questions just fire away.
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
#outer {
display: table;
width: 100%;
table-layout: fixed;
}
.itemwrapper {
display: table-cell;
vertical-align: top;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
if image are same size or same ratio, you may use flex , width and min-width to set a break point:
#outer {
width:70%;/* demo*/
margin:auto;/* demo*/
display:flex;
flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
width:100%;
min-width:200px;/* demo*/
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
remove or reset to your needs the rules commented with demo.
Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer {
position: relative;
width: 50%;
height: 0;
margin: 30px auto 0 auto;
padding-top: 25%;
background-color: #999;
}
.itemwrapper {
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.item2 {
left: 50%;
}
#outer img {
height: 100%;
max-width: 100%;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper item2">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.
Here is a jsfiddle where you can see cells expanding outside of their container(or extending the size of a table when this happens with tables) because:
of a long word even if "word-wrap: break-word" is set
of a large div even if "overflow: hidden" is set
http://jsfiddle.net/NUHTk/166/
<div class="container">
<div class="leftBlock">
Too-much-text-ъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъ
</div>
<div class="rightBlock">
Right block content
</div>
</div>
<div class="container">
<div class="leftBlock">
<div style="width: 1200px; height: 200px;">
Huge element
</div>
</div>
<div class="rightBlock">
Right block content
</div>
</div>
CSS
.container
{
width: 500px;
padding: 10px;
margin: 20px auto;
background: rgb(255,240,240);
}
.leftBlock, .rightBlock
{
display: table-cell;
vertical-align: top;
}
.leftBlock
{
width: 100%;
//max-width: 0;
word-wrap: break-word;
overflow: hidden;
background: rgb(240,255,255);
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
background: rgb(200,200,200);
}
This issue can be fixed by adding a "max-width: 0" to .leftBlock, result of which can be seen here:
http://jsfiddle.net/CyberAP/NUHTk/103/
This same problem and fix can occur when dealing with tables.
This feels like a hack. My questions are:
why does max-width: 0 solve the problem.
Why and how does it change the behavior of the cell sizing.
I guess, why isn't this the default behavior?
You can add display:table; and table-layout:fixed to container class. Hope this is solve your issue.
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;
}