Question

I want this result:

LEFT THING, not fixed    here comes a text, which is 100% widthed in this "column"
width (content itself    but my problem is, when its too long, this column goes under the
determines that)         left column, so not left floated. I also want this text go and
                         go under and under, but normally, THIS LINE would continue under
                         the left column, which I dont want to. Its like table element
                         but its still considered bad for this situations :/

the DIV construction:

<div style="float: left">LEFT THING</div>
<div style="float: left">here comes a text, which...</div>

how to solve it?

Answer 1

Floated elements with width: auto are sized using the shrink-to-fit algorithm. That is, they attempt to grow as much as their content wants.

To avoid this, you should limit the width, e.g. by setting an explicit width or an upper bound with max-width.

Then, to make the following block grow to fill the remaining space, you should let it have the default float: none andwidth: auto, and establish a Block Formatting Context (BFC) to prevent it from overlapping the float.

.wrapper, .main {
  overflow: hidden; /* Establish Block Formatting Context */
}
.left {
  float: left;
  max-width: 30%; /* Prevent it from growing too wide */
}

<div class="wrapper">
  <div class="left">...</div>
  <div class="main">...</div>
</div>

.wrapper, .main{
  overflow: hidden; /* Establish Block Formatting Context */
  text-align: justify;
}
.left {
  float: left;
  max-width: 30%; /* Prevent it from growing too wide */
  border: 1px solid blue;
}
.main {
  border: 1px solid red;
}

<div class="wrapper">
  <div class="left">LEFT THING LEFT THING LEFT THING LEFT THING</div>
  <div class="main">here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which...</div>
</div>