CODEWITHSUNDEEP
htmlcss
freefaller
freefaller

Reputation: 19953

Parent div not the same width as child div

If I have a parent <div> with no width specified, and child <div> with a fixed width specified, and the window is smaller than the fixed width... what rules within CSS/HTML result in the parent <div> only being the width of the window rather than the fixed width of the child?

Using the following snippet, the parent has a background colour of red... and the child is way bigger than the window it's living in.

If you run the snippet and scroll the window to the right, you'll see that the red background of the parent is only as wide as the window itself, despite the child being a lot bigger?

#parent {
   background-color:red;
}
#child {
   width:1000px;
}
<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>

Is there an easy CSS command that means that the parent has to be at least the same size as the child, without specifically setting the size with something like min-width:1000px

Upvotes: 4

Views: 7880

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

By default div elements have display: block so their width is equal to width of its parent or in this case body or html.

But if you set display to inline-block on #parent element now that element will have width same as width of its content or largest child element in this case its #child element.

#parent {
   background-color:red;
   display: inline-block;
}
#child {
   width:1000px;
}
<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>

Upvotes: 14

Kuba Wojtach
Kuba Wojtach

Reputation: 566

This might be solution which you are looking for:

#parent{
    background-color : red;
    display : inline-block;
}
#child {
   width:1000px;
}

or use the float:

#parent{
    background-color : red;
    float: left;
    clear: both;
}
#child {
   width:1000px;
}

https://codepen.io/powaznypowazny/pen/eWYNZE

Upvotes: 3

Related Questions