float правый элемент вне родителя

Question

У меня есть родительский div и трое детей. я хочу, чтобы кто-то плавал слева от родителя, один был в точном центре родителя, а другой - плавать справа от родителя. но перемещенный правый элемент вышел за пределы родительского div. это не из-за нехватки места.

fiddle

#boards { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: white; 
 
    text-align: center; 
 
} 
 
#boards p { 
 
    font-family: 'bebas_neueregular'; 
 
    color: rgba(160, 224, 247, 1); 
 
    margin-top: 30px; 
 
    font-size: 50px; 
 
} 
 
.board_items { 
 
    width: 250px; 
 
    height: 300px; 
 
    background-color: gray; 
 
} 
 
#board_items_container { 
 
    width: 85%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: auto; 
 
    background-color: orange; 
 
    padding: relative; 
 
} 
 
#board1 { 
 
    float: left; 
 
    padding: relative; 
 
} 
 
#board2 { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: relative; 
 
} 
 
#board3 { 
 
    float: right; 
 
    padding: relative; 
 
}

<div id="boards"> 
 
    <p>TOP BOARDS</p> 
 
    <div id="board_items_container"> 
 
    <div id="board1" class="board_items"> 
 
    </div> 
 
    <div id="board2" class="board_items"> 
 
    </div> 
 
    <div id="board3" class="board_items"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

В вашем HTML, переместите правую всплывающий элемент перед элементом вы хотите, чтобы плавать вокруг:

<div id="boards"> 
    <p>TOP BOARDS</p> 
    <div id="board_items_container"> 
    <div id="board1" class="board_items"> <!-- float: left --> 
    </div> 
    <div id="board3" class="board_items"> <!-- float: right --> 
    </div> 
    <div id="board2" class="board_items"> <!-- not floated --> 
    </div> 
    </div> 
</div> 

Answer 2

Попробуйте следующий код CSS:

#board1 { 
    display: inline-block; 
    float: left; 
    position: relative; 
} 
#board2 { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 
#board3 { 
    display: inline-block; 
    float: right; 
    position: relative; 
}