Geek Answers Handbook

How to make div width fit content not window

In the following code, how do I make the "#wrap" width fit the width of its children, rather than limit the borders of the browser windows?

HTML

<div id="wrap">WRAP
    <div id="menu">MENU</div>
    <div id="large-content">LARGE CONTENT</div>
</div>

CSS

#wrap{background: #eee;}
#large-content{background: #f1c40f; width: 1000px; height: 300px}
#menu{background: #2c3e50; width: 100%; height: 50px}

JSFIDDLE

https://jsfiddle.net/67egnpho/1/

+4
source share
4 answers

Childs width is 100%, so it is currently suitable.

The appendix display: inline-block;will contain embedded content.

#wrap{background: #eee; display: inline-block;}
+5
source

The element is <div>by default a block level; it occupies the entire space of its parent container, which in this case <body>.

You can set the value #wrap {display: inline-block;}or #wrap {display: table;}so that it flows with the surrounding content.

#wrap {width: fit-content;), . .

+2

Either an inline or an inline block if you want wrap to act like the block itself.

HTML:

<div id="wrap">WRAP
   <div id="menu">MENU</div>
   <div id="large-content">LARGE CONTENT</div>
</div>

CSS:

#wrap{background: #eee;display: inline-block;} 
or   
#wrap{background: #eee;display: inline-block;}
0
source

Is this what you are looking for?

Addendum:

position: absolute;

Parental and floating children will make parental stretching suitable for children.

-1
source

More articles:


All Articles