[Résolu] RESPONSIVE : 3 Div cote à cote dont 2 Div avec un min-width

Bonjour,

J'ai donc 3 div que je souhaite positionner les unes à cotés des autres.
Une premiere Div à 20% qui ne doit pas descendre en dessous de 150px (min-width)
Une deuxieme Div qui doit toujours prendre la taille restante
Une troisieme Div à 20% qui ne doit pas descendre en dessous de 150px (min-width)

Le problème apparaît lorsque la résolution est en dessous de 1150px. Ma 3eme Div saute et part directement sous mes 2 premieres Div

Il doit surement y avoir une propriété css qui permet de garder les 3 div sur la même lignes tout en gardant un ou plusieurs min-width

Merci d'avance. Ci dessous le code css de mes 3 Div

Div qui entoure mes 3 Div

.divResult {
display: table;
margin-bottom: 5px;
border: 3px solid #f69322;
min-height: 250px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: #333333 0 3px 3px;
margin-top: 20px;
width: 99%;
}

Ma 1ere Div

.tabPointO {
display: table-cell;
background-color: #f69322;
text-align: center;
color: #FFF;
width: 20%;
min-height: 250px;
min-width: 150px;
float: left;
height: 100%;
}

Ma seconde Div

.tabPointO2 {
display: table-cell;
float: left;
position: relative;
min-height: 250px;
background-color: #fff;
text-align: center;
color: #000;
max-width: 60%;
height: 100%;
}

Ma troisieme Div

.tabPointO3 {
display: table-cell;
float: right;
position: relative;
width: 20%;
min-height: 250px;
min-width: 150px;
background-color: rgba(148, 95, 38, 0.95);
text-align: center;
color: #FFF;
height: 100%;
}

Modifié par servicesinformatique (22 Oct 2013 - 18:18)

Bonsoir,

il faut choisir: display ou float.
display:table-cell les garderas sur une ligne quoiqu'il arrive.
Float, tant qu'il y a de la place ça ne passe pas a laligne.

Cdt

Sinon ,
le formatage en tableau est comme le tableau, incapable d'accepter les vameur min et max-width correctement, reste alors a jouer sur l'heritage CSS et d'imposer ce min/max-width sur un element contenu ou un pseudo-element
Voir et tester : http://codepen.io/gc-nomade/pen/kIzgn

Bonsoir,

Juste par curiosité, c'est pour quoi est-ce dont faire ?
Est-possible d'avoir plus de détails sur la finalité de la chose, une image, une page en ligne ?
Je reste dubitatif sur le choix du min-width

Merci beaucoup gc-nomade

Problème résolu !!
Le problème venait bien du float incompatible avec le display table cell