Parent Div Don't Wrap Child Div

parent div don't wrap child div

Try assigning display:inline-block to your innercontainer element. Try this code.

.innercontainer {
  background-color: #f3f3f3;
  display: inline-block;
}

Parent div not wrapping child element with float attribute

Try adding float:left and display:block to the outer div

see updated example - http://jsfiddle.net/jordanlewis/gDtSZ/1/

Parent div not wrapping child div when screen is resized

I managed to find a solution to my problem. The problem was not my invalid markup; it was actually the CSS for my #topnav ID. Here's how I changed that ID to get the result I wanted:

#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}

The key changes are below the height property.

Why is container div not wrapping the child divs (which are overflowing the container)

Add overflow: auto to the .category_border class.

Here's your updated demo:

https://jsfiddle.net/0vkzoxm3/3/

The reason your title and description overflow the containing div is because both are styled with float: left. When you float an element it is taken out of the normal flow. Hence, as far as the container div is concerned they don't exist.

The answer is to "clear" the floats. There are many ways to do this. One way is to add overflow: auto to the container. This forces the container to expand to the height of the floated elements.

Here's a bit more if you're interested:

Clearing Floats: An Overview of Different clearfix Methods

How Floats are Positioned

Good luck!

Tightly wrap multiple child divs with a parent div

Set the display-attribute of the outer div #toolbar and the list #toolbar ul to inline-block:

#toolbar {
    overflow:hidden;
    padding:5px;
    background:#FFF;
    border-radius:5px;
    border:1px solid #AAA;
    margin-bottom:15px;
    display:inline-block;
}
#toolbar ul {
    overflow:auto;
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
}

I hope it helps...

EDIT: You said "tightly wrap". You have a padding in the toolbar-div. So if you really want to have it with no space towards the outer div, remove the line padding:5px.

Keeping parent div to width and height of wrapping children

So you want the parent to shrink again to fit the width of the children each time a child wraps. I'm afraid there is no pure CSS way to do that.

Not to change your spec, but I'd suggest keeping the parent at 100% width, and stretching/shrinking the children to fit the parent. I, of course, don't know if that's an option for you, or if the width of the children must be fixed. If it is an option, flexbox or media queries are two good ways to go about it. If it isn't, you'll have to resort to JavaScript.

Here's an example using media queries and calc():

.cal {  box-sizing: border-box;  position:relative;  display:inline-block;  min-width: 100%;  border:3px solid yellow;}.month {  box-sizing: border-box;  float:left;  width:calc(100% / 12);  height:170px;  border:3px solid red;}@media (max-width: 900px) { .month { width: calc(100% / 6); } }@media (max-width: 600px) { .month { width: calc(100% / 4); } }@media (max-width: 400px) { .month { width: calc(100% / 3); } }

<div class="cal">  <div class="month">Jan</div>  <div class="month">Feb</div>  <div class="month">Mar</div>  <div class="month">Apr</div>  <div class="month">May</div>  <div class="month">Jun</div>  <div class="month">Jul</div>  <div class="month">Aug</div>  <div class="month">Sep</div>  <div class="month">Oct</div>  <div class="month">Nov</div>  <div class="month">Dec</div></div>

/* Relevant parent and child styles */

.parent {
  position: relative;
  width: 500px;
  height: 400px;
}

.child {
  position: absolute;
  max-width: 250px;
}


/* Individual positioning of child elements */

#fine {
  top: 30px;
  transform: translateX(100px);
}

#wrapped {
  top: 90px;
  transform: translateX(400px);
}

#unwrapped {
  top: 200px;
  left: 170px;
}
#extra {
  top: 300px;
  left: 170px;
}



/* The rest is only styles to make the example easier on the eye */

body {
  background-color: hsl(0, 0%, 90%);
  margin: 0;
  padding: 24px;
}

.parent {
  background-color: white;
  border: 2px solid grey;
}

.child {
  padding: 12px;
  background: yellowgreen;
}

<div class="parent">
  <div id="fine" class="child">
    Text should be wrapped normally with the max-width of the child, like this
  </div>
  <div id="wrapped" class="child">
    This text will be wrapped much earlier though because it is running out of the parent container
  </div>
  <div id="unwrapped" class="child">
    "white-space: nowrap" only prevents *all* wrapping
  </div>
  
   <div id="extra" class="child">
    short text
  </div>
</div>

.wrapper {
  overflow: hidden;
  padding: 10px 0 0 10px;
  width: 70%;
}
.wrapper > div {
  height: 40px;
  background: #F00;
  margin: 0 10px 10px 0;
  width: 200px;
  float: left;
  position: relative;
}
.wrapper > div::before {
  content: '';
  position: absolute;
  background: rgba(255, 255, 0, 1);
  left: -10px;
  right: -10px;
  top: -10px;
  z-index: -1;
  height: 1000%;
}

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

.backdrop {
    position: fixed;
    top:0;
}
.backdrop {
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dialog {
    margin:auto;
    position:relative;
}

.dialog {
    width: max-content;
    z-index: 101;
    margin: auto;
    /* basic way t o center */
    top:50%;
    left:50%;
    margin:-80px -150px;

}

.titlebar {
    height: 50px;
    line-height: 50px;    
    background-color: #000000;
    border-radius: 10px 10px 0px 0px;
}

.title{
    color:#FFFFFF;
    font-size: x-large;
    padding:0 50px 0 10px;
}

.close_button {
    position: absolute;
    right: 0px;
    top: 0px;
    line-height:30px;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #ffd549;
    color: #000000;
}

.content {
    background-color: #FFFFFF;
}

.content-width {
    background-color:#FFF000;
}