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/
Related
I noticed this strange behavior years ago back when I was first learning HTML, and still don't understand it.
Both jsfiddles are based on the following HTML:
<div class="parent">
<div class="child">
Child content
</div>
</div>
In the first jsfiddle, I'm adding a margin-top to the child element, yet the entire parent element shifts downward: http://jsfiddle.net/flyingL123/uUgVz/
In the next jsfiddle, the only thing I'm changing is adding a border to the parent element, and now the parent element no longer shifts down the page: http://jsfiddle.net/flyingL123/uUgVz/1/
Why don't both jsfiddles behave the same? Why is the parent element effected by the margin-top on the child element in the case when the parent element does not have a border?
It is because the childis not empty (height!==0)
<div class="parent">
<div class="child">
Child content
</div>
</div>
is the same as
<div class="parent">
<div></div>
<div class="child">
Child content
</div>
</div>
empty element will be used as wrapper
and adding border to the parent is like saying hey now we want to see something which is the same as just adding a letter:
<div class="parent">
m
<div class="child">
Child content
</div>
</div>
-Demo-
Note that you are applying the style on the parent element and not the child, that means the first and all next notempty childif they dont have a style set will adopt the parent style
It has to do with how block elements are rendered. By default, divs don't hide their contents, it means that anything inside a div that results being larger than its parent would stick out of it, like the margin of your child element, however you can use the overflow: hidden attribute so that the content is limited only to the size of the container, and thus, making your margin to push from the inside of your div, since it can't stick out of it:
See the updated fiddle:
CSS:
.parent{
width:300px;
background-color:#666;
color:white;
overflow: hidden;
}
.child{
margin-top:50px;
}
But in case you still want the children to stick out of the parent but to be pushed down, you can set the container's padding value instead of the child's margin value, see this other fiddle:
CSS:
.parent{
width:300px;
background-color:#666;
color:white;
padding-top: 50px;
}
.child{
/* margin-top:50px; */
}
The effect you described is caused by Margin Collapsing
Go through this Stackoverflow to learn how to remove the margin collapsing.
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);
I have a containing div that is constrained in its height and width. It has 2 child elements.
The first child can be of variable height (as the text within it can wrap, and this is desired behavior).
The second child is a div wrapping a table. The div is set to overflow-y: scroll, so it is meant to fill the remaining height of its container, and provide scrolling for the rest of its inner table when it doesn't completely fit.
Here's a simple view of the structure:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable" style="overflow-y:scroll">
<table>
...
</table>
</div>
</div>
Despite my tinkering, I can never get the second child, the scrollingTable div, to constrain itself to the limits provided by the container. Using height:100% doesn't FILL the remaining container height, but sets the height to the container's exact height (300px), which is too much because the headerArea takes up space too.
If the height of the headerArea was fixed, I could specify the scrollingTable's size as 300 - heightOfHeaderArea, but as mentioned above the headerArea's height is NOT fixed.
I'm likely going to have to use JQuery to resize the scrollingTable to the specified height, but I am curious if there is a pure css solution.
Any suggestions, or is this impossible without fixing the headerArea's height?
You can't do this with css alone. You have to give the scrolling div a height for it to be able to scroll (100% or fixed value).
http://jsfiddle.net/tUrTu/
This can be achieved though with javascript :
http://jsfiddle.net/tUrTu/2/
Hope it helps.
If you set the scrollTable to 100% it will inherit the 300px from the container div and go outside of the container div regardless of the fixed height you set to headerArea
You shall use Javascript to dynamically generate the height, but beware the sequence of the code must be HTML -> Javascript -> CSS.
code:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable">
<table>
...
</table>
</div>
</div>
<script language="javascript">
var headerh = document.getElementById('headerArea').offsetHeight;
document.getElementById('scrollingTable').style.height = (300 - headerh) + 'px';
</script>
<style type="text/css">
#container {
height: 300px;
}
#headerArea {
}
#scrollingTable {a
overflow-y: scroll;
}
</style>
I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css
.clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1
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/