Elements that are floated with a width: auto property are automatically sized using the shrink-to-fit algorithm, meaning they will expand to fit their content.
To prevent this automatic expansion, it is recommended to set a limit on the width by either specifying an explicit value using width or setting a maximum width using max-width.
In order for the next block element to occupy the remaining space after the floated item, it should have default properties of float: none and width: auto. Additionally, establishing a Block Formatting Context (BFC) can ensure that there is no overlap with the floated element.
.wrapper, .main {
overflow: hidden; /* Establish Block Formatting Context */
}
.left {
float: left;
max-width: 30%; /* Limit maximum width */
}
<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%; /* Limit maximum width */
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>