Develop Reference

Make children abide by parents width

I have a div nested in two div's. The outermost and innermost div has a set width. I want to make the outermost div's width to 0, so that all its children will be 0 too, or at least not visible.
But when I make the outermost div's width to 0, the innermost div is visible.
When setting the outermost div's width to 0, how can I make the children abide by its' parent rule?
JSFiddle
var outer = document.getElementById('outer'),
small = document.getElementById('small'),
large = document.getElementById('large');
small.addEventListener('click', function() {
outer.style.width = 0;
});
large.addEventListener('click', function() {
outer.style.width = '300px';
});
#outer {
width: 300px;
background-color: orange;
}
#content {
background-image: url("http://i.imgur.com/nri7bYd.jpg");
height: 200px;
width: 200px;
}
#content2 {
background-color: red;
width: 100px;
}
<div id="outer">
<div id="inner">
<div id="content">This is some content</div>
<div id="content2">This is another content</div>
</div>
</div>
<button id="small">width = 0</button>
<button id="large">width = 300px</button>

You need to specify the child div with 100% width. You are giving it a specific width (of 200px). By setting the child to 100% you will effectively say take up as much as my parent has.
#content {
background-image: url("http://i.imgur.com/nri7bYd.jpg");
height: 200px;
width:100%;
}
https://jsfiddle.net/9vk44jq9/

You can set the CSS overflow property to hidden, which clips everything outside the container.
This sort of problem has a lot of subtle variations, so different solutions are called for sometimes.

HTML-CSS div is 3px taller than child

I'm working on a project that uses several divs of the same class, each containing a single child element that might be an image or an iframe, of unspecified height. I'd like the container div to be exactly the height of its child element, but the default height is 3px taller than the child.
I've got a JSfiddle demonstrating the problem at http://jsfiddle.net/52me041n/2/.
HTML:
<div class="outside">
<img class="inside" id="pic" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fblogs.cisco.com%2Fwp-content%2Fuploads%2Fclouds.png&f=1" height="200px"/>
</div>
<br/>
<div class="outside">
<iframe class="inside" width="420" height="315" src="//www.youtube.com/embed/VwTnyRHEZSQ" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.outside{
background-color: red;
}
I'd like to know whether it's possible to set the div to the proper height with just CSS, and if not, how to right it with JS.

Updated the fiddle. http://jsfiddle.net/52me041n/3/
Use -
img, iframe {
display: block;
}

You need to set the display property to block for children inside the parent div. As a practice, I always also set margins and pads to 0 too. fiddle here
.outside > * {
margin: 0;
padding: 0;
display: block;
}

Images are not on the same baseline as text.
add
vertical-align:bottom;
to your img css
fiddle

For "I'd like to know whether it's possible to set the div to the proper height with just CSS, and if not, how to right it with JS." <== Yes,
<div id="cntr"> </div>
css :
#cntr { width : 100px; height : 100px; overflow : hidden; } /* overflow may have other values also like hidden, auto, scroll
*/

Try this code. Fiddle
.outside
{
background-color: red;
display: block;
}
.outside img, iframe {
float: left;
}

Dynamically resize div according to dynamic content?

I have a div called container which contains dynamically created content(paragraphs) through javascript. The problem is that the paragphs aren't shown on the div once they reach beyond the boundaries of the container. To solve this issue, I tried overflow but that just added x,y scrollbars.
What I'm trying to do is increase the height of the container after every parapgraph added i.e. when paragraph is added to container of height 20px, the container increases height to a further 40 px for next paragraph.
HTML
<div class="container"></div>
Add content
CSS
.container {
width: 120px;
height: 20px;
display: inline-block;
margin-left: auto;
margin-right: auto;
/* overflow: auto; */ //As aforementioned, I'm not in favour of scrollbars
background-image: url('http://i.imgur.com/dfzk0TW.png');
}
Javascript
$(function () {
$('#add').on('click', function () {
$('<p>Text</p>').appendTo('#container');
});
});
Any suggestions? Thank you!

Try this code
jsfiddle
remove height from css and use below code
$('<p>Text</p>').appendTo('.container');
remove # and put dot(.)

this code will get height of container div and than will add 20px in container div.
$(function () {
$('#add').on('click', function () {
$('<p>Text</p>').appendTo('#container');
heightWithPx = $('#container').css('height');
height = heightWithPx.substr(0,heightWithPx.length-2);
newHeight = parseFloat(height)+20;
$('#container').css('height',newHeight+'px');
});
});

How to place a div inside a bigger scrollable div at particular position

I have a div with height = 10*screen-height.
I want to add another smaller div to it with height = screen height
Assuming that I can add 10 such smaller div's onto the bigger div, I want to add this div at particular position on the bigger div. Say starting from 4*screenheight pixel. How do I do that using jQuery?

Presumably you already have the screen height stored, and the two divs created at the correct heights, so:
$(inner_div).css('position', 'relative').css('top', 4*screen_height);
You may not need position:relative in your style if it's in your css already

See here how you can access and manipulate the body's height and the big div's inners afterwards;
JSfiddle
HTML
<div id="biggy">
<div class="smally">Smally :)</div>
<div class="smally">Smally 2, don't forget me :D</div>
</div>
CSS
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#biggy {
width: 200px;
background-color: orange;
position: relative;
}
.smally {
width: 100%;
background-color: blue;
color: white;
text-align: center;
position: absolute;
}
JavaScript
$(document).ready(function() {
var bh = $('body').height();
var smally_offset = (bh / 10);
// Set biggy to be the body's height
$('#biggy').css('height', bh);
// Make all smallies 10% of the set height
$('.smally').css('height', smally_offset);
// Handle the different smallies :)
$('.smally:nth-child(1)').css('top', smally_offset * 0);
$('.smally:nth-child(2)').css('top', smally_offset * 1);
});

Why the container div height was not updated?

I'm adding elements into a container div whose height is 'auto' initially. I expect its height will be updated as the children elements appended. But, actually not. Could someone help me? I just want the container div height gets updated according to the children's height.
I used chrome debuging tool, the height of container div is less than height of children divs. Children divs are float:left.

If you're adding floated children to a div you need to have overflow:auto; on the parent.
You can also use another element to clear the float clear:both will do this.
This is because floated elements are taken out of the document flow.
Here's an example that shows you a few techniques you can use : http://jsfiddle.net/Tn5c3/
The CSS
#a, #b {
padding: 10px;
margin:10xp
}
#a {
background: #aa0000;
}
#b {
background: #00aa00;
overflow: auto;
}
p {
background: #0000aa;
padding: 5px;
}
.clear {
clear:both;
height: 50px;
}
The JS
$('#bb').click(function() {
addChild($('#b'));
});
$('#ba').click(function() {
addChild($('#a'));
});
function addChild(parent) {
var child = $('<p>floated para</p>').css({
'float': 'left'
});
parent.append(child);
}
The HTML
<button id='ba'>Add to A</button>
<button id='bb'>Add to B</button>
<div id='a'></div>
<div class='clear'></div>
<div id='b'></div>