Растянуть блок с float

подскажите пожалуйста как я могу растянуть блок желтого цвета чтобы при ресайзинге окна браузера он растягивался до бирюзового автоматически?

PS я новичок.

https://konstantin-voronenko-project1.gunniq.repl.co/

введите сюда описание изображения

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            margin-left: 140px;
        }
    </style>
</head>
<body>
<div style="background-color: aquamarine">привет участникам</div>
<div style="background-color: yellow; float: left; text-align: left">
    <p>Виды спорта:</p>
    <ul>
        <li>1asdf</li>
        <li>2fhdgdfhgfdg</li>
        <li>3fdgh</li>
        <li>4fdgh</li>
        <li>5fdgh</li>
        <li>6fdgh</li>
        <li>7dfgh</li>
        <li>9fdgh</li>
        <li>0fdgh</li>
        <li>5sdfa</li>
    </ul>
</div>
<h2 style="text-align: center; background-color: crimson">футбол</h2>
<div style="margin-left: 100px">
    <img src="img/football-team.jpg" width="200" style="float:left; margin: 0 10px 10px">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae cumque dolores illum quasi quibusdam
        rerum suscipit. A aliquid aspernatur beatae cum dicta ea eius ex iure, possimus quo voluptatem?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolorem eligendi eos ex facere fugiat
        impedit incidunt iste labore laborum libero magnam numquam praesentium, quam quos ratione tempora voluptatem
        voluptatum!</p>
</div>
<div style="background-color: aquamarine; clear: both">главное не победа, а участие!</div>
</body>
</html>

Ответы (0 шт):