CSS full height of parent container - html

I have some troubles with getting the full height of the parent div in my webdesign. The container div is a div inside a div with a height of 100%.
<div id="container">
<div id="navigation"></div>
<div id="content"></div>
</div>
I have tried to read some of the other questions on stackoverflow and others, by i can't get it to work.
With CSS.

var height= jQuery('#container').outerHeight(true);

Related

Make a div adjust its height to its absolutely positioned children

I have a div element (default positioning) containing and h1 and a link, both of which have absolute positioning. Naturally, the div elements height collapses. How do I make the div element adjust its height to its two children?
I have tried standard clearfixes, setting overflow to auto and setting the div's position to relative (which was a suggestion from another post i found) but none of them has worked.
I made a jsfiddle that illustrates my problem.
HTML Code:
<div>
<h1>the div doesnt go around this element</h1>
</div>
CSS Code:
div {border: 2px solid;}
h1 {position: absolute;}
Use min-width for div in css such that it covers the height required for children.
I made a jsfiddle helping you to solve this issue using jquery:
https://jsfiddle.net/9hubfbxt/
the html code:
<div id="parent">
<div id="child1" class="child">
</div>
<div id="child2" class="child">
</div>
</div>
the jquery:
var height = 0;
$("#parent .child").each(function() {
height = height + $(this).outerHeight(true);
});
$("#parent").height(height);
Now the height can be anything depending on just whatsever inside.
EDIT:
i edited your jsfiddle with my jquery workaround: https://jsfiddle.net/4yuco4cL/1/

Div appears to have no content as nested divs are floated

I have a container with several floated divs within it. I want the div to stretch to the full height of it's content.
I have tried adding overflow:visible to the container to make it expand and also added a clear but neither seem to work.
Live site link available here
You need to put something not floated in the div and clear that.
<div class="magical-div>
<div class="float1"> content </div>
<div class="float2"> content </div>
<div style="display:block;clear:both;"> </div>
</div>

HTML: set element size relative to parent when position is absolute

Is there a way to do it?
If I do it like this:
<div id="container" style="width:500px;">
<div id="content" style="position:absolute;width:100%;">
</div>
</div>
Then the content div will have the width of the browser window, instead of the 500px from the parent container div.
Always give position:relative to the parent if it's child have position:absolute;. Give position:relative to your #container DIV. Write like this:
<div id="container" style="width:500px;position:relative">
<div id="content" style="position:absolute;width:100%;">
</div>
</div>
Just set the position of #container to relative. Check out this jsFiddle for a demo.

How overflow:hidden helps div grow in the html css below?

<div id='container' >
<div id='content' > </div>
<div id='rightPane' > </div>
</div>
In the structure above content and rightPane are childs of container div. They contain the content and they expand in height with the growing content but the container div does'nt expand with it. I want to know the reason for it. Also i want to know when i apply overflow:hidden to container it starts expanding with the content in child divs. What happens when we apply overflow:hidden to the container parent div.
Hope this will be helpfull for you..
http://www.quirksmode.org/css/overflow.html

Two divs floated left next to each other the second must take up the rest of the line

HI, can someone please help me with this. I have:
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.
However the parent div actually has to also float left ie.
<html>
<body>
<div style="width=100%; float:left">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
This breaks it. Is there a way to get it working again with the parent div float left?
if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.
Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.
http://jsfiddle.net/robx/cpFUV/
It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.
You wrote width=100% instead of width:100% - fixed example:
<html>
<body>
<div style="float:left;width:100%;">
<div style="float:left; background-color:Red; height:100px;">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).
Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.
Example: http://jsfiddle.net/hwb4w/