Bonjour,

Avec mes premiers cours, je me suis lancé dans une petite page vitrine uniquement en HTML/CSS.

Mais je bloque pour mettre 2 div cote à cote, mais avec la possibilité qu'elle reste dans le flux, car la div de gauche contient du texte qui peut être plus ou moins longs selon la page. Ces deux div sont comprise dans une qui les engloge et l'ensemble de la page et également dans une div. Et c'est cette dernière qui ne prend pas en compte (normal) les floats.

Le html :
<div id="principal">
<div id="contenu">
<div id="texte">
<p>Texte ici</p>
</div>
<div id="coordone">
<h1>Coordonnées</h1>
<p>Texte ici</p>
</div>
</div>
</div>

Le CSS :

body {
margin: 0px;
padding: 0px;
background: #cec7ae;
}

1. principal {

margin: 0px
background: rgb(255,255,255);
width: 980px;
border-radius: 0px 0px 25px 25px;
-webkit-box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.5);
box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.5);
}

1. contenu {

width: 900px;
float: none;
clear: both;
margin: 0px auto 0px auto;
}

1. texte {

width: 530px;
float: left;
min-height: 700px;
}

1. coordonne {

width: 350px;
float: right;
min-height: 300px
}

Voila le rendu visuel :

j'ai essayé de remplacer les float:left et right par des display: inline-block; le contenu est pris en compte mais le div de droit ca position par rapport au bas.

Voila j’espère avoir été assez clair et explicite, merci d'avance pour votre aide.

Je n'ai pas compris ce que tu veux faire ?
Tu veux le mettre l'une avant l'autre a la verticale, ou horizontale ?

Au niveau de la position je veux ce que j'ai, mais que le blanc s'adapte au contenu écrit.

Mon prof est revenu, il m'a dit de mettre une div (spacer)

1. spacer {

clear: both;
margin: 0px;
padding: 0px;
}

Ca marche nickel, merci quand même.

C'est une méthode merdique pour corriger le flux...
Ça pollue ton html pour rien.

Utilise cette technique mais en créant la div via css avec :after.

Ce serra plus propre