I'm working on a page that can hold very big content. It could easily grow to (and over) 10.000px in width. I simply want my page to stretch along.
This should be very simple, and I can fix it with display: table-cell, but it doesn't 'smell' as the right answer. It feels like a hack. I think I'm missing something crucial.
Fiddle
CSS:
#container { white-space: nowrap; padding: 50px; background-color: green; }
#container > div { display: inline-block; width: 200px; height: 200px; }
#container > div:nth-child(2n+1) { background-color: red; }
body { background-color: #ccc; }
HTML:
<div id="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
Why isn't the container div stretching to its content?
BODY is correctly stretched, so how do I force my container div to take the width of its parent or children?
try something like this
#container {
background-color: #008000;
display: table;
padding: 50px;
white-space: nowrap;
}
EDITED
#container {
background-color: #008000;
display: inline-block;
padding: 50px;
white-space: nowrap;
}
DEMO
Add overflow-x: scroll; to #container. Is that what you want?
Edit: changed to overflow-x :)
CSS
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
overflow-x: scroll;
}
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
display:table;
}
#container > div {
display: inline-block;
width: 200px;
height: 200px;
display:table-cell;
}
add the line overflow-x: scroll; to your container-css
here is a jsfiddle as well
Related
I have three divs:
.container (display:table),
.left, .right (display:table-cell);
For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.
I didn't added the html, because it's too long. Please check the result on JSFiddle. How can I solve this issue?
.container {
border: 1px solid gray;
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 80%;
background: yellow;
}
.right {
display: table-cell;
width: 20%;
background: red;
}
.items {
width: 40%;
height: 100px;
background: blue;
display: inline-block;
margin-right: 15px;
}
.scroll {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
If you change the table-layout property to fixed for the .container element, it resolves the issue:
Updated Example
.container {
border: 1px solid gray;
display: table;
table-layout: fixed;
width: 100%;
}
I´m currently trying to make an inline article for a school project.
The text is overflowing and I´m not sure why, but I have an idea.
When I remove white-space: nowrap; - the text doing what it´s suppose to, fill the pink box, but then the inline doesnt work any more.
Any ideas? I have attached a codepen.
http://codepen.io/torarne_n/pen/PwQBmx
.slider {
width: 1225px;
height: 600px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
margin-bottom: 10px;
}
.slides {
height:500px;
width:1225px;
display: inline-block;
background-color: aqua;
}
.intro-image {
height: auto;
width: auto;
display: inline-block;
background-color: pink;
}
.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
}
The issue is that the inner elements are inherriting the nowrap. Simply set it back to normal on the inner elements:
.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
white-space: normal;
}
I am trying to display a list of images (equal height) in a horizontally scrolling div. This much works, but when I want to have a fixed image - a "cover" image present leftmost inside container the layout gets screwed up.
Below is the CSS and HTML of my work. If you run the snippet you can see that the list jumps to next line, instead of staying adjacent to "cover" image and scrolling horizantally. Here is the jsfiddle - http://jsfiddle.net/6x66dLdy/
I can solve it using javascript by setting width of #list programmatically, but I want to do it with CSS alone if possible.
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
display: inline-block;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
<div id="container">
<div id="cover">
<img src="http://placehold.it/160x100"/>
</div>
<div id="list">
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/60x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
</div>
</div>
This happening because you don't have widths specified. You have to provide widths for both of your inner divs and also to the container. Giving explicit width to container is advisable because you can then safely assign percent widths to children.
In you use-case, you have to calculate how much width is safer for your div#cover and then use the CSS calc to calculate the remainder of the width to assign to the list. Also, remember to account for the margins you have.
Relevant CSS:
width: calc(100% - 240px);
Your fiddle: http://jsfiddle.net/abhitalks/6x66dLdy/1
It is always better to specify a proper box-sizing. So include this at the top of your CSS:
* { box-sizing: border-box; }
.
Float the #cover left and remove the display: inline-block from #list.
This will allow the cover image and images in the list be any unknown width. Setting a fixed width on the containers like the other answers would not allow this.
Fiddle: http://jsfiddle.net/6x66dLdy/4/
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
float: left;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
test this
http://jsfiddle.net/6x66dLdy/3/
#container {
height: 120px;
background: #ccccff;
width:1000px;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
width:200px;
float:left;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
width:600px;
float:left
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
To answer your question you can specify min-width:800px; for the id #container
so it does not jump down and stay beside the main picture
here is an example http://jsfiddle.net/6x66dLdy/5/
I have a div with several child divs which are floating left. I don't want them to break, so I set them to display:inline-block and white-space:nowrap. Unfortunately nothing happens at all. They just keep breaking.
At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visible it scrolls in y-direction.
.a {
width: 400px;
height: 300px;
white-space: nowrap;
display: inline-block;
}
.b {
float: left;
width: 50px;
height: 200px;
display: inline-block;
}
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="clearfix"></div>
</div>
You can see my complete implementation on JSFiddle
I may not fully understand your question but it seems like the divs/scroll behave if you remove: float: left; from .b and add: overflow:auto; to .a
Not sure what you mean, but if you stop floading your b, and give your a overflow:auto it should work
see: /jsfiddle.net/88yjz/3/
Does this give you what you want? Added overflow scroll.
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #EEEEEE;
}
.a {
width: 400px;
height: 300px;
white-space: nowrap;
overflow:scroll; /* Added this line*/
background-color: lightcoral;
-webkit-box-sizing:border-box;
}
.b {
width: 50px;
height: 200px;
margin-top: 50px;
margin-left: 15px;
display: inline-block;
background-color: lightgreen;
-webkit-box-sizing:border-box;
}
.clearfix {
float: none;
clear: both;
}
What I want to achieve is for all the elements to be on the same line, but have the text-overflow kick in if the paragraph in the middle is wider than the available space, but if not, then the right float should still be in the same line.
Codepen: http://codepen.io/anon/pen/hHvCA
HTML:
<div id="outer">
<div id="left"></div>
<div id="middle">
<p>Can this paragraph fill the space between the left and right floats without making the right float wrap?</p>
</div>
<div id="right"></div>
</div>
CSS:
#outer {
background-color: #222;
height: 100px;
width: 100%;
}
#left {
background-color: #555;
width: 100px;
height: 100px;
float: left;
}
#right {
background-color: #777;
width: 200px;
height: 100px;
float: right;
}
#middle {
background-color: #999;
height: 100px;
}
#middle > p {
line-height: 100px;
color: #eee;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
}
Use a
float: left
on the #middle one. Also, try setting a width, to avoid the middle div spanning to 100%
As discussed in the comments below, your best bet is to use a proper grid system. Twitter Bootstrap has two great choices Default Grid System and Fluid Grid System. In addition, you can package Bootstrap from their website to only include the modules you need.
Otherwise, with the typo in # middle fixed, you can use float: left on #middle to make #right not wrap. You will also need to use JavaScript to set the width on #middle based on screen-size, or you risk the text being too long and pushing #right down again. A solution is easier to accomplish with a grid system!
I wrote the JS to work on window.onload, you could also do on a resize.
Modified code: http://codepen.io/anon/pen/xfwJi
One Solution:
#middle {
background-color: #999;
height: 100px;
float:left;
width:1364px;
}
try floating the middle div to left as well. That should work.
#middle {
background-color: #999;
height: 100px;
float:left;
}
Here is a fiddle. Check it out, it pretty much solves your problem.
Moreover, I would like to suggest you using a grid system as it will help you in making the website in a lot more easier way with very or no little problems!
CSS:
#outer {
background-color: #222;
height: 100px;
width: 100%;
}
#left {
background-color: #555;
width: 100px;
height: 100px;
float: left;
}
#right {
background-color: #777;
width: 200px;
height: 100px;
float: right;
margin-top: -100px;
}
#middle {
background-color: #999;
height: 100px;
width: 72%;
float:left;
}
#middle > p {
line-height: 100px;
color: #eee;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
}
Take a look at this site, provides 10 CSS grid systems! :)
use float: left; in #middle > p
#middle > p {
line-height: 100px;
color: #eee;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
float: left; /* change here */
}