Positionnement div

je viens de creer un div contenair dans le lequel j'ai placé 4 autres div qui sont "baseline", "webdesign", "graphisme", "print", dont voici le code html:
------------------------------------------------------------------------------

cde HTML:

<div id="container">
<div id="baseline" style="font-size:1em">
<p id="basel1">une</p>
<h1>identité visuelle</h1>
<p id="basel3">à toute <b>marque</b> et à chaque <b>produit</b></p>
</div><!--fin baseline-->

<div id="webdesign"><img src="images/webdesign-btn.png" alt="bouton-webdesign" title="bouton-webdesign" />
</div>

<div id="graphisme"><img src="images/graphisme-btn.png" alt="graphisme-bouton" title="graphisme-bouton" /></div>

<div id="print"><img src="images/print-btn.png" alt="print-bouton" title="print-bouton" /></div>

</div><!--fin container-->

Voici le CSS:

div#container{
background:url(../images/layout-middle.jpg) 0 top repeat-y ;
width:950px;
position:relative;
margin:0 auto;
}

div#baseline{
width:950px;
margin:0;
padding:10px 0;
color:#999;
}

div#webdesign{
width:30%;
margin-right:26px;
float:left;
}

div#graphisme{
width:30%;
float:left;
margin-right:26px;
}

div#print{
width:30%;
float:left;
}

-----------------------------------------------------------------------------
les div wedesign, graphisme et print sont ailgnés à gauche donc sur une meme ligne.
Par contre lorsque je verifie sur mon navigateur ,ils ne sont sont dans le conteneur, et quand j'enleve le "float:left" de la div print qui est la dernière les div autres apparaissent dans le navigateur et le print se retrouve en dessous.Je cherche donc une solution pour tous les trois apparaissent dans le conteneur.J'estime qu'avec mon code, cala derait etre possible.Si solution il y'a j'attends de vos reponses.merci d'avance.
SAM VALDER
Modifié par samvalder (10 Mar 2011 - 10:37)

Je ne sais pas si c'est ça, mais en fait tu voudrais avoir des div qui ne sautent pas de lignes automatiquement ?
Ce qu'il te faut donc c'est quelque chose entre block et inline, et ça existe !
display: inline-block;
De plus, tu n'as même plus besoin de flottants, après !
Les blocs se mettent automatiquement côte à côte.

Sinon, un article qui pourrait t'aider dans ton problèmes de dépassements de flottants.
Mais normalement ça devrait être bon avec la technique ci-dessus.
Modifié par zatuxa (10 Mar 2011 - 12:22)