Problem z float:left

pytanie zadane 12 maja 2017 w HTML i CSS przez Shife Nowicjusz (220 p.)
zmienione kategorie 12 maja 2017 przez Arkadiusz Waluk

Witam. Właśnie przerabiam 3 odcinek kursu programowania, pomimo tego że utworzyłem 2 divy square które powinny zajmować połowę ekranu to wszystkie kafelki ustawiają się jeden pod drugim ( tak jakby float: left; nie działał )

Oto kod HTML ( sekcja body )

<body>

<div id="container">
     <div class="rectangle">
        <div id="logo">Marian Kowalski</div>
        <div id="zegar">12.00</div>
     </div>
     <div class="square">
        <div class="tile1"> </div>
        <div class="tile1"> </div>
        <div style="clear:both;"> </div>
        <div class="tile2"> </div>
        <div class="tile3"> </div>
        <div style="clear: both;">
        <div class="tile4"> </div>
        </div>
    
     <div class="square2">
        <div class="tile5"> </div>
     </div>
     <div style="clear:both;"> </div>
     <div class="rectangle">
     </div>

</div>

i CSS

body
{
    background-color: #000000;
    font-family: 'Inknut Antiqua', serif;
    font-size:20px;
    color: #FFFFFF;
}

#container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    
}

.rectangle
{
    width: 960px;
    margin: 20px;
}
.square
{
    width: 45%;
    float: left;
}
.square2
{
    width: 50%;
    float: left;
}

#logo
{
    float:left;
    width:600px;
    font-size:40px;
    margin-top:10px;
    margin-bottom:10px;
}

#zegar
{
    float:left;
    font-size:40px;
    margin-top:10px;
    margin-bottom:10px;
}

.tile1
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #3095d3;
    float: left;
}
.tile2
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #666666;
    float: left;
}
.tile3
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #93c748;
    float: left;
}
.tile4
{
    margin: 10px;
    width: 480px;
    height: 142px;
    background-color: #ee5a32;
}
.tile5
{
    margin: 10px;
    width: 400px;
    height: 304px;
    background-color: #666666;
}