How to make the div was the height of the content? Float is not used. .main is in the middle of the page ( margin: auto ).

 #main { position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; width: 100px; height: 100px; border-radius: 5px; -webkit-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); } 
 <div id="main"> <div id="content1">Текст1</div> <div id="content2">Текст2</div> <div id="content3">Текст3</div> </div>

  • Isn't that right now? - Yuri
  • Four responses from telepaths, heh) - andreymal
  • @andreymal, they jumped with a tambourine and the Great Programmer answered them with an answer :) - Yuri
  • Possible duplicate question: The height of the block depending on the height of another block - Vadizar
  • display: inline-table; height: auto; - vp_arth

6 answers 6

You can use display: table; without height:

 #main{ position: absolute; margin: auto; top: 0; right: 0; left: 0; bottom: 0; width: 100px; display: table; border-radius: 5px; -webkit-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); } 
 <body> <div id="main"> <div id="content1">Текст1</div> <div id="content2">Текст2</div> <div id="content3">Текст3</div> </div> </body>

  • Why body ? - Yuri
  • @Yuri, look at the question, and don't ask stupid questions) - vp_arth
  • I cleaned the body there :) - Yuri
  • @Yuri, and everyone should now rush to edit answers? - vp_arth
  • It is desirable. body is useless here :) - Yuri

at height: auto, height is always calculated based on content. The div has this default property auto, i.e. you do not need to write something

  • Then the div sprawls the entire height of the page. - Maks_Tresh
  • absurd, can not be like that. We are clearly not talking about the same thing, reformulate your question - Chamond
  • I added it yesterday. ps The solution L. Vadim works, but that the content div is located in the center of the page (as in the original version with a fixed height), it does not work. - Maks_Tresh

He is with you and so on content:

 #main { background-color: red; } #content1, #content2, #content3 { margin: 3px; padding: 3px; background-color: #202020; color: #fff; } 
 <div id="main"> <div id="content1">Текст 1</div> <div id="content2">Текст 1<br>Текст 2</div> <div id="content3">Текст 1<br>Текст 2<br>Текст 3</div> </div>

  • Added css to the question. - Maks_Tresh

Clearfix is ​​an auxiliary class in css, with the help of which we correct the collapsing dimensions of the container for floating elements.

The following rule is added to CSS:

 .clearfix::after { content: ""; display: table; clear: both; }

And then the class clearfix added to the container, inside which lie the float columns.

Without clearfix :

 .container { width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 5px #999; border: 2px solid #34495e; } .columns - container { padding: 10px; background: #ecf0f1; border: 2px solid #34495e; } .column { width: 150px; min-height: 100px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; } .column1 { float: left; } .column2 { float: right; } 
 <div class="container"> <div class="columns-container"> <div class="column column1"> .column1<br> Первая колонка </div> <div class="column column2"> .column2 Вторая колонка </div> </div> </div>

C clearfix :

 .container { width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 5px #999; border: 2px solid #34495e; } .columns - container { padding: 10px; background: #ecf0f1; border: 2px solid #34495e; } .column { width: 150px; min-height: 100px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; } .column1 { float: left; } .column2 { float: right; } .clearfix::after { content: ""; display: table; clear: both; } 
 <div class="container"> <div class="columns-container clearfix"> <div class="column column1"> .column1<br> Первая колонка </div> <div class="column column2"> .column2 Вторая колонка </div> </div> </div>

  • And how does this relate to the question? - Yuri
  • @Yuri And what else, actually, can be the problem? - Crantisz
  • Well, I am not saying that the question uses float - Yuri
  • @Yuri well, the question is “too general” to give an unequivocal answer. But perhaps the problem is this, not with him, so someone who finds this question through a search. - Crantisz
  • Unfortunately, I do not use float - Maks_Tresh

Add this to the main div.

 #main{ position: absolute; margin: auto; top: 0; right: 0; left: 0; width: 100px; overflow:auto; border-radius: 5px; -webkit-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); box-shadow: 0px 0px 50px 10px rgba(0,0,0,1); } 
 <body> <div id="main"> <div id="content1">Текст1</div> <div id="content2">Текст2</div> <div id="content3">Текст3</div> </div> </body>

And do not touch the height.

So it works, if you put the bottom:0 will creep to the bottom.

  • Then div to the full height of the page sprawls. - Maks_Tresh
  • you can insert your css code into the question - L. Vadim
  • Everything inserted css. - Maks_Tresh
  • I updated the code, check - L. Vadim
  • Does it work, but how does div.main center by page height? - Maks_Tresh

There is also an option: align with the middle using transform

 #main { position: absolute; margin: auto; top: 50%; left: 50%; width: 100px; border-radius: 5px; -webkit-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); transform: translate(-50%, -50%); } 
 <div id="main"> <div id="content1">Текст1</div> <div id="content2">Текст2</div> <div id="content3">Текст3</div> </div>