div worden smaller ipv onder elkaar..

[kompas]

Ik heb in een website 3 divjes naast elkaar staan:
Hier staat tekst in.. Wanneer het scherm smaller wordt (mobiele telefoon ofzo) blijft de achtergrond van de div dezelfde kleur houden maar div blijft ook net zo groot! Terwijl de tekst er dan niet meer in past:-(

Ik wil nu een minimale breedte voor de footblocks aanhouden. Als het scherm te smal wordt, zullen de divjes door de float: left, onder elkaar terechtkomen in plaats van te smal naast elkaar.
Dus de div een minimale breedte. gaat het scherm verder gaan ze onder elkaar. Scherm nog smaller komt er een horizontale schuifbalk..

het idee is leuk maar euh.. HOE?


Wie kan mij daarin opweg helpen?

HTML

<div class="footblock">
contact gegevens
</div>
<div class="footblock">
openingstijden
</div>
<div class="footblock">
ander tekst
</div>

CSS

.footblock {
float: left;
width: 28%;
padding: 2%;
margin-right: 2%;
background: #69BD31;
border-radius:10px;
height: 158px;
font color: black;
}

.footblock:last-child {
margin-right: 0;
}