I'm currently working on resolving an issue with a parent div containing 3 floating children. I previously asked for help, but the solution provided only partially fixed the problem. For more information, you can click here.
The issue arises because the width of the second child div is unknown, while the first and third child divs have fixed widths. Additionally, both the first and second child divs have fixed heights.
To address this issue, the third child div is set to display: block !important; clear: both; width: 100%; so that it moves to the next row and occupies the entire space of the parent div.
The main challenge lies in ensuring that the second child div expands horizontally while remaining aligned with the first child div.
In relation to my previous question, using display: inline-table; does not allow content to be scrollable if it overflows.
.container {
background: #ccc;
overflow: hidden;
float: left;
padding:5px;
}
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 5px;
border: 3px solid #73AD21;
}
.floating-box2 {
float: left;
width: auto;
height: 75px;
margin: 5px;
border: 3px solid #73AD21;
}
.floating-box3 {
float: left;
clear: both;
width: 100%;
height: 75px;
margin: 0;
background: magenta;
}<div class="container">
<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus necessitatibus adipisci quisquam ducimus dolor fugit, officia perferendis harum temporibus laborum iure numquam, assumenda dignissimos neque, quod doloribus nihil autem dolores!</div>
<div class="floating-box3">Floating box</div>
</div>