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.
Related
I want to have a header with 100% width,
in some cases there is a horizontal scrollbar and that
causes the div to cover the visible area and not the whole
parent element.
.cont {
width: 100%;
}
http://jsfiddle.net/BhRdV/1/
There are certain cases, where even if you don't set width to DIV, it will still scale 100%.
Also, please be clear with ur question.
<div style="width:1200px;">
<div style="width:100%;">Tadda</div>
<div>Tadda 2</div>
</div>
I've been reading about how elements with the float attribute do not have their height accounted for. Therefore, I should use clear:both right before the end of the parent div so that it will stretch over the entire inner div.
You can see on This Page that the div with the id full-height-template-container is not stretching over its inner content, and therefore the footer (copyright text on the bottom right) is coming up too high on the page.
The layout looks like this:
<div id="full-height-template-containter">
<div id="content-container">
<div id="full-width" style="float:left;">
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
What else can I try in order to make the outer div stretch over its children?
Thanks in advance!
That's a common problem. To solve it, the clearfix hack in its many variants was invented.
I was confronting the same issue until I inserted this version of "Clearfix" at the top of the container that needs to be stretched as such:
CSS:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML:
<div class="clearfix"> </div>
<span class="doc">
John Nixon
Henry Wright
</span>
In #full-height-template-container you are using height: 100% which means the div takes 100% height of the parent.
If we track back in your CSS each parent element is assigned height: 100%, including the html and body elements, which means that the height is taken from the window - so as a result the div will never exceed the size of the window (but content will still overflow).
So it is not the floats that are causing the problem, it is the height you are explicitly assigning to each div.
i put your sample on fiddle and gave it some css to show the divs:
http://jsfiddle.net/WRzsE/
You can clearly see that it works perfectly as you describe you would expect it to. You are doing something else wrong i suspect...
Perhaps you are using a position: absolute somewhere, wich would cause the elemnt to be lifted out of its parent, and would make the parent not stretch (just thinking out loud here...)
edit:
I just took a look at the actual page (overlooked the link). Your div's are stretching just fine. The problem is with the positioning of your footer, wich is set to absolute. I suspect you are trying to achieve a sticky footer, have a look at this, works like a charm. I use it all the time: http://ryanfait.com/sticky-footer/
Im having trouble vertical aligning 2 divs inside a 100% height div. I googled but failed solving.
pseudocode:
<div container, fixed height>
<img, dynamic height/>
<div inner, 100% height>
<div><img/></div>
<div><img/></div>
</div>
</div>
The two divs in the inner div, i want them to be in the vertical center of the inner div, but i cant find a way. its not possible to know the height of the inner div, its just set to 100% because of the random height of the image above it. The divs inside the inner div will also have dynamic heights.
2 hours of fiddling around gave no results, so im coming here.
The page where you can see it in action: http://pyntmeg.no/?iframe
You can give the parent DIV.container a position :relative property since it has a fixed height.
The inner div can then have a position:absolute and you set its height to 100% or maybe a little lower. you can use the top property to move it around.
Try:
.item {
position: relative;
top: 10%;
}
You may need to adjust top: 10%;
As long as the parent/grandparent divs have the width to work with it you can apply 'float: left' to the grandchild divs style.
vertical-align is meant for table elements, not regular divs, etc. In order to get vertical-align middle to work, the element needs to be set to display:table-cell and it's parent needs to be set to display:table-row
Be careful with that, though, because it really does change the way the element interacts with it's sibling elements, and it could definitely change how your page is laid out.
The best use of this would be something like this:
<div class="table-row">
<div class="td">lorem ipsum</div>
<div class="td">dolor sit amat</div>
</div>
Css:
.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}
NOTE
This will not work with elements that are floated left/right, and it will change how the border width effects the overall width of the element.
I would only use this with tabular data, much like I would suggest only using a table.
<div id="parent">
<div id="leftColumn"></div>
<div id="rightColumn"></div>
</div>
When the height of the 'leftColumn' and the 'rightColumn' less than
screen height, the 'leftColumn' and 'rightColumn' should have the same
height as screen.
If the height of the 'leftColumn' and the 'rightColumn' longer than
screen height, the 'parent' div should expand automatically.
Is there anyone know how to solve this problem? Thanks in advance.
left and right columns:
min-height:100%;
parent:
min-height:100%;
height:auto;
That should work ;)
Even if the parent DIV encircle childs, if childs are carry out from the normal flow with CSS, the parent height DIV will be one EM.
You can verify that by changing the background-color of your parent DIV and give to child properties like position: relative or float: left keeping parent DIV in the normal flow
I'm working on some complex design and have a silly question once again :)
Well, let's say I have a div and some content inside, like:
<div style="background-color: #fff; width: 1000px; margin: 0 auto;">
<img src="img.png" />
<p>Blablabla :)</p>
</div>
<div style="background-color: #000; width: 1000px; margin: 0 auto;"></div>
Div's width is fixed, but I don't tell the browser what's the height (so there's no height property of div in css file).
And then, when I add more and more text the first paragraph or bigger image, the text-child of first div is in the second div.
How to prevent this from happening? Or what did I to make it happen?
Thanks!
Make sure that the parent divs are not position:absolute; or position:fixed; in the CSS. They should be position:relative;.
If any child items are float:left; or float:right; then the reective parent div needs an overflow:auto; property inorder to cause the div to fully wrap the child items.
It'd help us help you more if you posted a whole sample of a working page, not just the divs, and the CSS as well.
It should be auto-expanding, it sounds like you have some other styling with positioning that's throwing the default behavior off.
You can see in a demo here that it should expand (height: auto;) to whatever content you give it, dynamically added or not.
I would check for floats and positioning on the img and p. But I cant tell you more without seeing the full css/html can you post a link?