I am facing an issue with my code snippet where there is an unwanted "padding" zone even though the padding is set to zero. How can I prevent this zone from appearing?
Code
div.left {
background-color: red;
max-width: 25%;
float: left;
}
div.right {
background-color: aqua;
float: left;
}
<div class="left">
longcontent longcontent longcontent
</div>
<div class="right">
something
</div>
Result
https://i.sstatic.net/t9ES6.png
What I want
https://i.sstatic.net/v86pA.png
Edit
The above code example is a simplification, and I need a solution that works for more complex scenarios as well:
div.left {
background-color: red;
max-width: 40%;
float: left;
}
div.right {
background-color: aqua;
float: left;
}
<div class="left">
longcontent
<img src="https://i.sstatic.net/snioV.png">
</div>
<div class="right">
something
</div>