Children Not Staying Inside Parent Divs

children not staying inside parent divs

A parent cannot take the height of a direct child if the child is absolute because the absolute elements are removed from the document flow(like floats), so in this case "card" doesn't even know "content_container" even exists .

https://jsfiddle.net/OmarIsComing/eq4L86g9/1/

update:

solution with flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/2/

solution without flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/3/

Child divs not wrapping to stay inside parent

Just remove the width attached to the parent. It forces the parent div to increase its height to accomodate the content in the div #two. SO keep the parent div as such:

<div id="parent" style="display: inline-block; white-space: nowrap">

And this should do the trick for you.

Alternately, you could add a min-height to the parent div so that it automatically accomodates its width based on the content inside its child. So your parent div could look like this:

<div id="parent" style="min-width: 150px; display: inline-block; white-space: nowrap">

Hope this helps!!!

EDIT: Your child divs already wraps inside the parent div. This is 'revealed' when you add a small width to one of the child div named two.

See that here : http://jsfiddle.net/K2xn5/

If you want you div two to wrap within the parent div, then there's no point in attaching a fixed width to the parent. Instead, you will need to provide a fixed width to the div named two. This would then occupy the space AS DEFINED by the content. Your parent div would then just keep expanding based on the size of its children, in this case, div one and two.

Check out these fiddles :

Fixed width to child, no width to the parent: http://jsfiddle.net/K2xn5/1/

Child div wrapping itself based on the size of its content: http://jsfiddle.net/K2xn5/2/ and http://jsfiddle.net/K2xn5/3/

Hope this helps!!!

keep children div inside of parent div

Your problem is that you are using margin-left, which is trying to give a margin in between one div and the other. Here is a new JSFiddle where I set the position to absolute, changed the margin-left to left, and added top: 0px; to set it to be at the top (overlaying the other div).

.taskbar-bar {
  position: absolute;
  top: 4px;
  left: 100px;
    height: 35px;
    width: 2px;
    background: green;
}

Items inside of container won't stay inside parent despite child having overflow set to auto

Change you css like this:

.container {
  height: 100vh;
  width: 100%;
  background-color: #f9f9f9;
  padding: 20px 30px;
}

Working example

Child div not inlining inside parent div

Added float:left; to the .stats div-children.

.stats {  display: inline-block;  margin-right: 6px;  float: right;  padding: 0;  font-family: "Roboto" sans-serif;  color: black;}.stats div{  float:left;}.separator {  background: rgba(47, 187, 255, 0);  height: 20px;  width: 1px;  vertical-align: middle;  border-left: solid;  border-width: 1px;  border-color: rgba(0, 124, 184, 0.7);  float: left;  margin-top: 5px;  margin-left: 4px;  margin-right: 4px;  display: block;}

<div class="stats">  <div class="points"><b>Lorem </b>  142</div>  <div class="separator"></div>  <div class="luck"><b>Ipsum</b>  64% <i>Blabla 3</div></div>

CSS child div tag not spanning inside parent div tag

The reason why the parent's height appears to collapse is because when you float an element, it is taken out of the document flow and therefore does not contribute to the computation of the parent container's final dimensions. If all the children are floated, then the parent's height will collapse to zero.

The solution is rather simple: use overflow: hidden to clear the float in the parent element. However, if you have overflowing content that you want to show (like a dropdown menu), you will have to employ the clearfix solution.

#mod1
{
    background-color: #888;
    border: 1px solid black;
    overflow: hidden;
    /* overflow: auto; will also work fine */
}

You can see from the snippet below that adding the rule works:

body{  max-width: 600px;  margin: auto;}
#mod1{  background-color: #888;  border: 1px solid black;  overflow: hidden;}#mod1 .left{  float: left;  width: 75%;}#mod1 .right{  float: left;  width: 25%;}

<div id="mod1">  <div class="left">    Book Accomodation + Deals With The Best In The Business  </div>  <div class="right">    VIEW ON THE WEB  </div></div>

Children Not Staying Inside Parent Divs