I am designing a fluid layout (no fixed px, all in %)
I have the HTML as;
<div class="parent">
<div class="fl child"><a class="prev"></a></div>
</div>
If I check in Firebug, the height of parent is calculated as 400px..But if I give child as height:100%, it does not take the entire height..
How do I fix this?
Unfortunately heights don't work so well with percentages, you can take a look at the min-height css property but you may need to employ some javascript.
Related
For ex:
<div class="parent">
<div class="child">
</div>
</div>
Here, normally if I give margin as 20%, it is 20% of parent's width. But I want child to have margin calculated based on its own width. Is it possible by any chance?
Edit:
The (Orange)Margin should be calculated based on width of (Green)Child. I.e. Wider the Green Box, more the Margin. (Or less in my case).
Basically Similar to margin:auto. But I don't want to use that, since we don't want to align it exactly in center.
As long as you nest the child div inside the parent div, the child div's attributes will be relative to the parent div's attributes.
Use an invisible div.
E.g. if you want to set a margin to the left of 20% of the child div, just set width of child to 84% and width of the div to 16%.
Also, use id, not class:
<div id="parent">
<div class="invisible"></div>
<div id="child">...</div>
</div>
and in style.css:
.invisible {
display:none;
}
Also, set display of the rest of the divs to inline-block to get them to align horizontally.
Set parent Div with position:relative and margin in % and provide child element with fix height and width in pixel and also, margin with pixel
or
second way, set parent div with position relative and provide child element with position absolute and set left right and width
bit confused about heights of nested containers in html/css.
for ex. in this case -http://jsfiddle.net/Y59a7/ if inner2 and inner1 have explicit
height 100%, then height:100% appears to work orelse it looks like the one in fiddle.
<div class="container">
<div class="inner1">
<div class="inner2">
<div class="inner3">
asdlfalsjdflk
asldkflaflkjkalf
</div>
</div>
</div>
</div>
Here's how to think of it:
inner3 will have a height that's equal to 100% of the height of it's containing div (inner2).
But how does inner2 calculate its height? As, in your example, inner2 does not have an explicit height set, its height will be the minimum height required to display its content. (Taking padding and margins into account).
So inner3 will have the height of inner2, and the height of inner2 will be the natural height of inner3.
try this demo
{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
If you want inner3 takes up 100% of height, then all parents' height need to be set to 100%, even body and html
I am applying max-height to nested divs? but it is not working as expected root element working is perfect but child height not applying?
<div style="max-height: calc( 33% - 10px);">
<div style="height:30px;"></div>
<div style="max-height: calc( 100% - 30px);">
//height not applying
</div>
</div>
Unfortunately, percentage heights are calculated from the explicitely specified height of the parent element, not its actual height. If height is not set, it is auto, which can't be used for percentage. Only Opera 12- (Presto) calculates percantage min-height from the specified min-height directly.
Assuming you don't care about old browsers (since you use such modern features like calc()), I'd suggest to try Flexbox for this layout.
How to split screen with three divs by following demands:
- main div should cover whole screen (100%x100%)
- sub div after div should cover main div( each sub div = 33% )
I tried to do it as following :
<div style="width:100%; height :100%; background-color:Lime;">
sss
<div style="width:100%; height:34%; background-color:Blue;">
a
</div>
<div style="width:100%; height:33%; background-color:Gray;">
b
</div>
<div style="width:100%; height:33%; background-color:Aqua;">
c
</div>
</div>
You need to set height of body and html to 100%. See this fiddle.
I think your main source of confusion is that your 'main' div is only going to take up as much space as it needs to satisfy the style requirements. It will take 100% of the size of the parent element, but if that size is not defined, it only grows to the minimum size required by whatever it contains.
In this fiddle, I just wrapped your code in a div defined to be 200px high, and it seems to work fine (however, note that the 100% is actually diminished by the fact that 'sss' is included in the main div, before the contained divs).
If you want to remove the white margin, set the style to "margin:0" on the body tag.
Use the display: flex and make sure to set 33% as your width for each, that way you make sure that the three of them occupy 1/3 of the screen
I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is how it should work in my oppinion).
Except the display table, table-row, table-cell solution, is there any other way of making all divs 100% of the viewport and if one needs to be higher, make the others stretch to 100% of the parent div that got stretched by the increased div.
How? :)
Thank you.
Correct me if I'm wrong but it seems that you want equal height floated columns. The explanation to this can be quite involved so I'll point you to a few examples.
Try
http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I don't follow your question completely. Have a look at this code:
<html>
<body>
<div style="height:50px;position:relative">
<div style="background-color:red; float:right; height:100%">moo</div>
<div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div>
<div style="background-color:blue; float:right; height:100%">foo</div>
</div>
</body>
</html>
As you can see, the center DIV is has height of more than 50px, so the the outer DIV (with the relative position") is stretched, along with the other inner-DIVs.
Doesn't this work for you?