Currently, I am attempting to utilize Bootstrap 4.5 to position a div over two existing divs. Instead of explaining it through text, the image linked below provides a visual representation of what I am aiming for:
https://i.sstatic.net/gbylW.png
In this scenario, the navy and pink sections represent two columns, while the white section sits outside of both.
Despite multiple attempts, I have been unsuccessful in replicating a similar layout. The code snippet below showcases my latest attempt:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="row pb-3" style="height: 520px;">
<div class="p-3" style="float:left; background:red; height:220px; width:200px; z-index: 2;"> </div>
<div class="col-md-3" style="background:blue;"> </div>
<div class="col-md-9" style="background:pink;"> </div>
</div>
</body>
</html>Unfortunately, this method is not yielding the desired outcome. I am unsure why it is failing. Can anyone provide guidance on how to properly achieve the layout depicted in the image?