Как сделать что-бы float блоки переносились на новую строку?

Question

[Даниил Сухих]

Есть 6 блоков стоящие в ряд и имеющие float, мне нужно что-бы при уменьшении экрана они не оставались на месте а переносились на другую строку.

<div class="egatop">
	<h3>p class="accbal">Ваше количество баллов: Самое большое количество баллов:</h3>
	<hr>
	<div class="warapperuser">
                <div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 100</div>
		</div>
               <div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 100</div>
		</div>
                <div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 100</div>
		</div>
                <div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 100</div>
		</div>
                <div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 100</div>
		</div>
		<div class="topuser">
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 100</div>
		</div>
	</div>
	<div class="clear"></div>
</div>

.egatop {
	width: 90%;
	display: block;
	margin: 30px auto;
	min-height: 100px;
	background: #fff;
}

.egatop h3 {
	text-align: center;
	padding: 15px 0 0 0;
	font-size: 20px;
	font-family: "Open Sans", sans-serif;
}

.topuser {
	width: 14.81%;
	height: 170px;
	background: #ffcc68;
	float: left;
	border-radius: 2px;
	transition: .5s;
	margin: 20px 10px 30px 10px;
}

.accbal {
	color: #66cc00;
	font-size: 17px;
	padding: 0;
	margin: 0;
	font-family: "Arial";
	font-weight: bold;
}

.clear {
	clear: both;
}

.warapperuser {
	display: block;
	width: 1080px;
	margin: auto;
}

.topuser > img {
	display: block;
	margin: 1px auto 1px auto;
	width: 100px;
	height: 100px;
}

.topuser > div {
	text-align: center;
	font-family: "Open Sans", sans-serif;
}

.topuser > div:last-child {
	color: #00a816;
	font-weight: bold;
}

Answer 1

[Сергей Герасимов]

Для .warapperuser задайте отнрсительную ширину, например 100%. А для .topuser абсолютную (в пикселях)

Answer 2

[SecretBrain]

У вас в классе .warapperuser фиксированная ширина.Ну и блокам min-width какой-нибудь задать.