I have a horizontally scrolling container with several inline-block divs, each containing an image. The Image is set to height:100% and width:auto. The problem is the inline-blocks aren't taking the width of the image. They seem to be using the native image width rather than the rendered width.
.container {height:300px; overflow:auto; white-space:nowrap;}
.container div {display:inline-block; height:100%;}
img {height:100%; width:auto;}
<div class="container">
<div>
<img src="example.jpg"/>
</div>
<div>
<img src="example.jpg"/>
</div>
</div>
https://jsfiddle.net/8mL0yx56/3/
The whole thing is inside a flex item, which seems to be what's causing it. Any way to stop this?
.flex-item {height:100%;}
It can solved you problem.
You set .container {height:100%;}, but its father,.flex-item, doesn't have height.
Related
I have this structure (simplified):
<div id="outer" style="display: table-cell">
<div id ="someOtherDiv">.......</div>
<div id="inner" style="text-align: center; vertical-align: middle">
<img src="path" />
</div>
</div>
I need IMG to be centered both vertically and horizontally.
Image is centered only horizontally but vertically in screen.
What else should I add to accomplish this?
Of course, if I set BODY to be 100% height, and then inner div to be also 100% height it works, but the fact is that I cannot actually add 100% height to BODY tag, so I need to do this only changing some style to INNER div.
I thought if OUTER div is table cell, ideally, vertical align style should work, but it doesn't. In fact, when using Firebug, I can see that OUTER div expands to all screen and INNER div only ocuppies the IMG space.
Any suggestion?
...
<div id="inner" class="flexbox; align-items: center">
<img src="" class="vertical-align: middle"/>
Perhaps using flexbox and align-items for the inner div and then align the img vertically in the img tag. But also consider width, padding, and height for settings to control the maximum much space the images need.
I am trying to build a horizontal scrolling layout, composed of image blocks:
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
I used display:inline-block and white-space: nowrap; properties to achieve this, and it does work but browsers don't seem to recompute block widths on resize?
Check here: https://jsfiddle.net/g597w3Lr/2/ and try resizing the browser..
Here is a screen grab to better understand what is my problem:
https://youtu.be/VxKo4gysc1o
At first all images are well positioned and i can scroll horizontally: perfect.
I then resize the browser
images are resizing, not the .item wrappers. White gaps appear :(
Basically i was expecting same feature as with vertical scrolling, i.e. adapting width depending on content size.
I actually dont even understand the logic here..
Is there any way to get over this?
Thanks!
Original answer
EDIT 2: Looking at your video I think the new approach is what you are looking for.
You have to display your divs with .item class as inline and remove your white-space: normal property.
.item {
display: inline;
height:100%;
}
Updated JSFiddle.
Explanation:
I am not an expert of CSS so if someone see some mistake please correct me.
When you display an element as inline-block as the official documentation says:
inline-block
Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
which means that the element that you display as inline-block acts like a block but you can set it inline (in the same line). This means that you can set a div (which is display: block as default) in a single line. You can also see it here:
The div element, short for division, is the block level generic container.
Also, inline elements cannot get height/width properties so this is the reason why when you display your divs with .item class as inline, they wrap the content but not get the height/width that they should correspond to take (from their parents in your case, as you put them with %).
If you display them as inline-block it does not changes anything about their default height/width properties. Just allows you to display them in a single line.
JSFiddle to see the three divs (inline/ inline-block / block, as default).
You will have to modify slightly your css
HTML
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
CSS
html,body {
height:auto;
}
.container {
display: inline-block;
white-space: nowrap;
height:auto;
}
.item {
display: inline-block;
white-space: normal;
}
.item img {
width:100%;
height:100%;
}
Fiddle
check it see that's what you want ?
I manage your classes with border:solid 1px red;
and use width:100% in some classes.
also in class item:
width:100%;
https://jsfiddle.net/g597w3Lr/6/
I have a parent container that has a (priori unknown) number of children that have a minimum width. When I resize the browser past the point of children shrinking, the parent background shrinks with the window, and does not cover children.
.row{
display:flex;
background-color:#fcc;
background-size:cover;
}
.row:nth-child(odd){
background-color:#fbb;
}
.child{
min-width:150px;
border:1px #ccc solid;
flex-grow:1;
}
<div class="row">
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
</div>
<!--more rows follow-->
jsfiddle
How would I go about ensuring the parent background covers all the children?
I tried putting width:100%, background-size:cover on the .row element. Also tried wrapping everything in a container and setting overflow:auto on that.
The only way I can sort of get it work is if i put overflow:auto on the .row element, but then it makes each row horizontally-scrollable independent of others.
I already saw this post, but it's not exactly what I need - I'm not wrapping any flex-items, the point is for them to stay the way they are.
I also read this article, but I can't see anything that can help with my problem.
You probably want display: inline-flex;
Check: https://jsfiddle.net/n5s3n3g8/1/
Hey I have a Problem with my Footer div on my Homepage
http://kelteseth.net/2012/04/einsteigerhilfe-unterschied-ubuntu-kubuntu-und-xubuntu/
The Problem is that the wrapper div dos not have the same height als the content div. The footer div is in the center of my Website :/ How can I change the size of my wrapper div in dependence on the size of my content div?
<div id="wrapper">
<div id="content">
<!-- My content... -->
</div>
</div>
<div id="footer">
<!-- My footer stuff... -->
</div>
Add clear: both; to your #footer style.
The #content and #primary divs are floated, so they don't influence the height of the #wrapper div.
Edit: This method doesn't change the height of the #wrapper div, so if you plan to give it a border or a background image, Lars Nyström's overflow: auto; method will be better for you.
Set overflow: auto; for #wrapper
The reason this occurs is because the parent element of a floating element collapses. There are a number of techniques to solve it. The one I mentioned is called the Overflow Method. More info here: http://css-tricks.com/all-about-floats/
I am using 960.gs, and want to vertically align an IMG. My sense is that
the IMG within the first DIV of grid_3 has no idea as to the height of the
rest of the row (the div of grid_6 suffix_3). The image hugs the top...
Some constraints: I may not know the height of the image. I may not know the
height of the content in the DIV to the right.
Without resorting to javascript, what's a good approach that wont break 960.gs?
Is this where I go to a nested container, just so that I can vertically center an
IMG? I have tried the css rule:
img {
vertical-align: middle;
}
There's obviously more to it....
Snippet...
<div class="container_12">
<div class="grid_3">
<img src="images/dlsmug5.png">
</div>
<div class="grid_6 suffix_3">
<h1>My Title - etc...</h1>
<p>
Heya, revamp time! It may not be obvious, but...,
I am coming up to speed with the CSS framework
of The 960 Grid System ..
</p>
</div>
<div class="clear"></div>
You can give to the div a table-cell behavior with a vertical align:
.grid_3 {
display: table-cell;
vertical-align: middle;
}