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 -

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:

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 {
border:1px solid #AAA;
#toolbar ul {

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>

How to make divs wrap *only* at their max-width, and not because its parent container is being overflown?

Don't use left to position the element but consider translate instead. The left property will restrict the width of your element.

/* 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 id="wrapped" class="child">
This text will be wrapped much earlier though because it is running out of the parent container
<div id="unwrapped" class="child">
"white-space: nowrap" only prevents *all* wrapping

<div id="extra" class="child">
short text

Remove excess width on parent when child elements wrap

Creating "pseudo-backgrounds"

I have just come up with a somewhat... creative solution:

  • The parent is not given a background, only padding and overflow: hidden

  • Each child div is given a ::before pseudo element that will create a "pseudo-background" (z-index: -1 moves it behind the divs background)

  • The pseudo-background is positioned with top, left and right with negative values that drag them into the divs padding.

  • The height: 1000% can be any absurd number, as long as it is tall enough to cover every row of divs. The excess is cleanly cut off with overflow: hidden on the parent div

This is what each div looks like, the black border is the edge of the parent which is where the yellow "pseudo-background" is cut off:

Screenshot 1

it becomes this:

Screenshot 2

Note: This is a purely visual thought experiment, which may be useful in some cases. The div is still taking up the same width, it just has no background color.


Resize it, see how the "pseudo-background" works at all widths.

.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">


How do i wrap a parent div to the width of a child div (dialog)?

For young browser you may use :

1) display:flex; property (includes centering) DEMO

.backdrop {
position: fixed;
.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 {

2) max-content as value for width and not set any width to inner
content . (exept some padding to keep room for the close button) :

Info on W3C about those new keywords value, soon avalaible i hope.

CSS updated

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


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

font-size: x-large;
padding:0 50px 0 10px;

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

.content {
background-color: #FFFFFF;

.content-width {

or as already said , use the display: table, inline-table

Related Topics

Leave a reply