CODEWITHSUNDEEP
htmlcss
funk-shun
funk-shun

Reputation: 4421

How to make a div grow with content?

Pertaining to html, how do I make a div container grow with the content instead of manually defining a width and height.

<div id="container">
  <div id="logo">
    <img src="someimage.png"/>
  </div>
</div>

No matter what the dimensions of logo are, container does not grow with it. :( How would I fix this, or can it be fixed?

Upvotes: 45

Views: 105516

Answers (6)

Ali Mahmoodi
Ali Mahmoodi

Reputation: 1204

For my case I use this line of CSS :

    min-height: fit-content;

Upvotes: 0

reda sewalm
reda sewalm

Reputation: 11

If you used float it prevents <div> to grow up with content so you can use clear after float and it will work.

<div class="clear-fix"></div>

.clear-fix{
   clear: both;
}

Upvotes: 1

molham556
molham556

Reputation: 193

Use the magical css property called "flex", it is really amazing 

yourDiv{
display:flex;
}

Just make sure that the children are not position: absolute because this will not work with flex.

Upvotes: 6

FrenkyB
FrenkyB

Reputation: 7207

You can specify min-width and min-height and DIV will adjust width / height as the content changes (of course, not below min width/height).

Working code pen example

Most important css properties from the code (DIV is editable, so just type in text and it will grow with it by width / height):

 min-height: 200px;
  min-width: 100px;

Upvotes: 1

tdammers
tdammers

Reputation: 20721

The default behaviour for divs is to fill the entire available width. A few ways to override this:

  • set display: inline-block (not IE-friendly)
  • float it (with the side effect of, well, floating it)
  • set display: inline (but that's almost never what you want)
  • set position: absolute
  • hard-code a width (no dynamic width though)

As a last resort, consider javascript.

Upvotes: 16

stecb
stecb

Reputation: 14766

If you don't define width and/or height, the div element grows along with its content. Unless his content is set to absolute! If the content is set to float, you have to set to the container 

overflow:hidden

in order to let it grow!

Upvotes: 49

Related Questions