Home html Div width to content

Div width to content




Hello, dear experts in layout! Please tell me a cross-browser solution for setting the width of the div by the content of the child elements. Those. available, for example

& lt; div id = "l0_b1" style = "display: block" & gt;
  & lt; span id = "l1_s1" & gt; content with unknown width here & lt; / span & gt;
& lt; / div & gt;

How to set l0_b1 width == l1_s1 width?

Answer 1, authority 100%

As already mentioned, either inline-block or inline, if the div needs block properties, then display: inline-block; , but in this case, you must also set vertical-align : top; so that the block does not slide down when adding content.
In general, you can practice it yourself, almost every browser has a debugger for developers, in FireFox write an attribute and click all the values ​​one by one, this option is simply irreplaceable for beginners, you can clearly see how the elements behave.

Answer 2, authority 67%

This problem can be solved in several ways:

1 – With display: inline-block; :

# l0_b1 {
 display: inline-block;
 border: 1px solid purple;
& lt; div id = "l0_b1" & gt;
 & lt; span id = "l1_s1" & gt; content with unknown width here & lt; / span & gt;
& lt; / div & gt; 

Answer 3, authority 17%

Answer 4, authority 17%

width: fit-content;

However, with support there, everything is not very happy yet.

Answer 5, authority 8%

Cool solution float . Align

clear: both;

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions