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/
Related
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 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.
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I need a child div to be as high as its parent, but I do not know the parent's height. It can change.
Setting "height: 100%" does not work, as the div will take the height of the entire page.
This is the layout of the divs:
<div id="deelnemersballoon">
<div class="balloonarrow"></div>
<div class="balloonborder">
<div class="ballooncontent">
<div id="aantaldeelnemers">1</div>
<div id="deelnemertekst">deelnemer werd toegevoegd.</div>
<div class="clear">
<button>Add something</button>
</div>
</div>
</div>
</div>
.balloonarrow should be as high as #deelnemersballoon
set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully
I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.
If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.
Hope this helps, can't tell much more without seeing your css.
A child div will not take up 100% of its parent if it has something in the markup before it:
Html:
<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>
css:
#parent {background:blue; height:500px; color:white}
#child {background:red; height:100%}
You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)
http://jsfiddle.net/wcprA/2/
The same thing applies if you have markup after the 100% child aswell, as seen here
http://jsfiddle.net/wcprA/5/
Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.