How to set equal heights for child divs with CSS - css

There is fiddle http://jsfiddle.net/only_dimon/6fgyy/
There is css:
.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.news {
width: 190px;
margin-left: 15px;
border: solid 1px #ccc;
background: #ddd;
float: left;
box-sizing: border-box;
padding: 10px;
height: 100%;
}
.news:first-child {
margin-left: 0;
}
JQuery defines div's height without no problems. Why children div can't get 100% height of parent? Red that the height of div with auto height is non-set value. Why is that so?
In example, overflow:hidden make the div "row" to get the max height of childs. And it visualy changed width of itself.
Please, explain me.
Tnx in advance.

Read the specification of CSS height property.
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'. A percentage height on the root element is
relative to the initial containing block.
Note: For absolutely positioned elements whose containing block is based on a block-level
element, the percentage is calculated with respect to the height of
the padding box of that element. This is a change from CSS1, where the
percentage was always calculated with respect to the content box of
the parent element.
So you should either set the children's position to absolute (which will ignore the float setting and will need explicit horizontal positioning for each child) or specify the height of the container explicitly such as:
.row {
position: relative;
height: 400px;
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
}
Here is your updated fiddle.
Also, check out this approach about "Equal Height Columns".

Height inheritance needs to go all the way up the tree.
Try:
body, html { height:100% }
.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
height:100%;
position: relative;
}

Related

Padding top as percentage of width not working

Here is my example code:
body {
margin: 0;
padding: 0;
border: 0;
background: #444;
}
#container {
width: 25px;
margin: auto;
margin-top: 2px;
padding-top: 1%;
border-bottom: 3px solid #58e;
background: #fff;
}
<div id="#container">text</div>
When I run it in chrome and inspect element the computed style of the div, the width is coming as 25px as defined above but the padding-top is coming as 13.65px.
I know that the padding-top is calculated based on % of the width of the element. So it should be 1% of 25px or 2.5px.
Why is it coming as 13.65px?
On MDN for padding :
Percentages refer to the width of the containing block [source]
This means percentage padding is calculated according to the width of the parent element, not the element itself.
In your case padding top for #container is calculated according to the width of <body>.

parent div with img child with width: 100%, height: auto, always leaves 2px height gap

I'm trying to have a stack of divs with fullscreen image as its child, but the parent div height doesn't match the img height.
The CSS is not too complicated
.content {
overflow: hidden;
position: relative;
min-width: 1024px
}
.content img {
width: 100%;
height: auto;
}
Here's the JSBin http://jsbin.com/baqexonu/1/ , you'll notice a 2px gap between the divs
please help.
It's the white-space. Add line-height: 0 to .content.
You can also add display: block to .content img.

Issue with divs stacking beside each other

I'm having some issues with aligning 3 divs beside each other.
http://jsfiddle.net/Lpprn/
I have a strong feeling it's in the syntax, but I can't for the life of me figure it out.
#story-container {
width: 700px;
padding: 0px;
margin: 0 auto;
}
#story-left {
width: 300px;
padding: 10px;
padding-right: 0px;
float: left;
text-align: right;
margin: 0;
background-color: #000000;
}
#story-center {
width: 100px;
float: left;
margin: 0;
background-color: #ffffff;
}
#story-right {
width: 300px;
padding: 10px;
padding-left: 0px;
float: left;
text-align: left;
margin: 0;
background-color: #808080;
}
Thanks for your help!
The containing elements don't add up to the width of the parent, 700px.
This is because padding is added to the width of the children elements.
Therefore, 300px + 10px + 100px + 10px + 300px != 700px
You would either have to subtract the padding values from the widths, or use something like box-sizing, which changes the box model of an element, thereby causing its padding/border properties to be calculated into its width/height.
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
border-box: The width and height properties include the padding and border, but not the margin.
From MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I added the following to each element, though it actually wouldn't be needed on the middle element, #story-center, as it currently doesn't have any padding.
jsFiddle example - it works now - (red background added to display the parent container)
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

Max-height <img> within container with max-height, inconsistent behavior

I have a container with a max-height defined in pixels, and then an IMG within with a max-height defined in percentage. In Chrome this works as expected, in other browsers the img simply extends beyond the container.
Anyone know which is the proper behavior, and why?
<figure>
<img src="http://images.autostash.com/parts/img/medium/wix/24056.jpg" alt="no picture">
</figure>
figure {
max-width: 90px;
max-height: 90px;
border: 1px solid red;
}
img {
max-height: 90%;
display: block;
margin: 0 auto;
}
http://jsfiddle.net/Dygerati/wWRJK/
According to the MDN description of the CSS height property,
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.
As a result, since you have only max-height and min-height declared, and NOT height, the img height defaults to auto.
Try this.
figure {
max-width: 90px;
height: 90px;
border: 1px solid red;
}

CSS DOM issue - cannot find a reason why property is being overwritten

The site in question is 1000freewebsites.com. The specific pages I'm struggling with are:
1000freewebsites.com/signup.php
1000freewebsites.com/login.php
This site uses the skeleton framework and Ryan Fait's sticky footer. On these pages I have a div with the ID of #bluestripe that should fill the vertical space between the header and the footer.
There are three parent elements; #html, #body and .wrapper. All are set to height:100%; in the stylesheet. #bluestripe is also set to height:100% and min-height:100%. As I understand it, this should achieve the effect I desire. Do I have my theory wrong?
Using Chrome Inspector I find that the height attribute is crossed out for .wrapper. If my theory is correct, this explains why #bluestripe is not expanding to fill the vertical space.
I cannot find any element that over rides .wrapper's height setting. Can you see what I am missing?
Your CSS rule for .wrapper has 2 height declarations. Get rid of the one setting height to auto.
.wrapper {
min-height: 100%;
height: auto !important; /* <- Get rid of this one */
margin: 0 auto -40px;
height: 100%;
}
this is your css:
.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}
you are defining two times the height and as the first one got !important its overriding the second one
this cause another error, because the paddings and the other elements are pushing the .container div down, so if you change a few properties you can get rid of this behavior:
#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}
.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}
this will made the .bluestripe shrink again but as the .wrapper still has the same background color, it doesn´t matters

Resources