Essayer de mettre trois divs sur la même ligne, l'un contre l'autre, centrée sur IE6, IE7, IE8 et Firefox

Question

J'ai un problème à faire cela:

--space-- div1_left div2_center div3_right --space -

Div 1 et 3 contiennent une image et Div 2 contient un menu déroulant CSS basé ul/li. Div 1 et 3 sont collés contre div 2. La ligne totale est centrée horizontalement.

Je suis capable de réaliser cela sur Firefox et IE8 sans problème. Mais sur IE7 et IE6 cela ne fonctionne pas. J'ai besoin qu'il soit compatible sur tous les navigateurs IE> = 6 et Firefox.

Merci beaucoup!

Answer 1

Eh bien je voudrais faire 1 conteneur div avec rembourrage gauche et droite et les marges gauche et droite: auto.

et à l'intérieur de celui-ci 3 div « s avec ce style:

width:100px;/* or how much you want (the sum of all must be <= container width) */ 
float:left; 

Answer 2

Essayez ceci:

1. Changer vos actuels '' éléments 'à div éléments span'. Ils seront par défaut intégrés et rendus côte à côte.
2. Envelopper ce contenu dans un 'div' avec un identifiant de 'nav'.
3. Définissez le style CSS de l'élément 'nav' pour inclure un 'margin: 0 auto; largeur: 960px; ' modes. Cela va centrer le tout sur la page.
4. Assurez-vous que vous utilisez une réinitialisation CSS pour normaliser le rendu dans les navigateurs.

Espérons que cela aide.

Bob

MISE À JOUR: Voici un lien vers un exemple:

http://jsbin.com/onasi/3/edit

Answer 3

Pour être plus précis sur la base de la réponse donnée par rcravens est le code ici:

<div style="vertical-align: middle; text-align: center; height: 50px; position: relative; 
background-image: none; top: 0px; left: 0px; right: 0px" class='ui-state-default'> 
     <span style="text-align: left; vertical-align: middle; display: inline-block; width: 33%;height: 100%;"> 
       <img id="imgLeft" style="float: left; text-align: center; vertical-align: middle;"class='logo' src='' alt='' /> 
     </span> 
     <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;"> 
       <input type="text" id="txtSearch" style="width: 50%" /> 
       <img id="btnGlobalSearch" class="findImage" style="cursor: pointer; vertical-align: middle" src="<%= System.Web.HttpContext.Current.Request.ApplicationPath.TrimEnd('/') + "/"%>Images/icons/find.png" /> 
     </span> 
     <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;height: 100%;"> 
       <img id="imgRight" style="float: right; text-align: center; vertical-align: middle;" src='' class='logo' alt='' /> 
     </span> 
</div> 

cela satisfait les fringales de IE7 .....