I'm having some trouble explaining this concept clearly, but I'm attempting to achieve a layout where elements wrap around a block.
Here is an illustration of what I mean:
The issue lies with the code provided below. It aligns correctly when there are only 2 blocks, but as soon as additional blocks are added, they drop below the welcome block (as shown in the image).
The desired design includes 2 blocks alongside the welcome box, followed by 3 blocks beneath it. Therefore, the 3rd block should be positioned under the welcome block, while subsequent blocks will continue in a normal flow (with 3 blocks per line).
CSS
#welcome-block {
float: left;
width: 300px;
background: #fff;
}
#bingo-offers {
float: left;
margin: 0;
padding: 0;
overflow: hidden;
}
.bingo-offer {
float: left;
width: 300px;
background: #fff;
margin: 5px;
}
.bingo-offer ul {
margin: 0;
padding: 0;
}
HTML
<div>
<div id="welcome-block">
<h2>Welcome to Zesty Bingo</h2>
<p>Zesty Bingo is the home of FREE Bingo!</p>
<p>We have a huge selection of Bingo games to choose. Simple find a game, and click play. It’s as simple
as that.</p>
<p>Ensure you click the read more link on each game to find out more details and customer reviews on all
of our hosted games.</p>
<p>Good Luck and we wish you wealth and happiness from all the Zesty Bingo team.</p>
</div>
<ul id="bingo-offers">
<li class="bingo-offer">
<ul>
<li><img src="../img/winkbingo-146.png" alt=""></li>
<li><h3>Wink Bingo</h3></li>
<li>Free Cash: <span>£20</span></li>
<li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li>
<li><a href="#">Play Now</a></li>
<li><a href="#">read more</a></li>
</ul>
</li>
<!-- Additional list items here -->
</ul>
</div>