Comment aligner des codes HTMl avec div float?
Kilou1984 -  
Bonjour,

Pour le moment, j'ai utilisé des codes HTML ( il y en a plusieurs avec lien simple, lien sur image, et balise texte) Pour ces codes, je les ait tous mis au centre avec la balise center, on va appeler tout ces codes " bloc-centre" : 

<div align="center">
  Bloc-centre
</div>

J'aimerai faire en sorte que le bloc-centre reste là ou il est toujours au centre, mais en y ajoutant deux autre blocs de chaque coté du bloc-centre comme ceci :
" Bloc-gauche" ( plusieurs codes situés à gauche) et à coté : "Bloc-centre" et à coté : "Bloc-droite" ( plusieurs codes situé à droite).

J'ai suivit un tutoriel pour utiliser la balise div float, qui n'a pas fonctionné, je l'est utilisé pour le bloc-center qui s'est retrouvé à gauche de mon forum, et le bloc-gauche s'est retrouvé en dessous du bloc-centre j'ai fait comme ceci : 

<div style="float:center">
Bloc-centre
</div> 
<div style="clear:both"></div> 

<div style="float:left">
Bloc-gauche
</div> 
<div style="clear:both"></div>

Merci d'avance pour votre aide.

--
Iceweasel sous linux, je n'est plus windows.

2 réponses

  1.  animostab
    Bonjour

    deja ne mélange pas html et css
    fait un fichier css externe nomme le style.css et appelle le comme cela dans ta page web
    <link rel="stylesheet" type="text/css" href="style.css">

    ensuite :

    html

    <div id="gauche"></div>
    <div id="droite"></div>
    <div id="centre"></div>

    style.css

    body, html{
    margin:0;
    padding:0;
    height:100%;
    }

    #gauche {
    float: left;
    width: 200px;
    background-color:blue;
    height:100%;
    }

    #droite {
    float: right;
    width: 200px;
    background-color:blue;
    height:100%;
    }

    #centre {
    margin: 0 200px;
    height:100%;
    }
    0
    1. inspiring
      Bonjour,

      les float c'est un peu casse tete pour les débutants; j'aurais plutot jouer simple en reprenant le code d'@animostab pour des element inline :

      html

      <div id="gauche"></div>
      <div id="centre"></div>
      <div id="droite"></div>

      style.css

      body, html{
      margin:0;
      padding:0;
      height:100%;
      }

      #gauche, #droite, #centre {
      display:inline-block;
      width: 33%;
      vertical-align:top;
      }

      #gauche, #droite{
      background-color:blue;
      }

      #centre {
      background-color:red;
      }

      en plus c'est carrement plus court a écrire :)

      reste la largeur et les dimensions à ajuster
      0
      1. animostab
        la difference c'est que le centre est fluide avec float mais pas les gauche droite
        enfin c'est presque la meme chose mais comme @Kilou1984 voulait des float ...
        une astuce avec inline-block pour eviter le white space entre les div c'est celle ci
        mettre un font-size:0; sur le parent

        exemple
        <div id="parent">
        <div id="gauche"></div>
        <div id="centre"></div>
        <div id="droite"></div>
        </div>

        #parent {
        font-size:0;
        }

        et après on remet les font-size dans les p h1 h2 etc des div en inlline-block
        0
      2. Kilou1984
        Bonsoir,

        Merci énormément à animostab et inspiring d'avoir pris de votre temps pour m'écrive vos tutoriels, mais, je ne voit pas ou placer mes 3 blocs ( bloc-gauche, bloc-centre et bloc-droite) par rapport à vos codes.
        0
      4. Kilou1984 Auteur
        Ce n'est pas un site internet que j'ai, c'est un forum, on ne peut y faire ce qu'on veut.
        0
      5. inspiring
        Ben un forum, c'est un site web :)

        Tu peux y placer ces codes sans problème, mais pour ce qui est d'accéder aux emplacements, faut surement toucher un peu au fichier source
        0

    Discussions similaires

    Aligner un texte avec son image
    Philosophe-du-88

    6 réponses
    image et texte sur même ligne (HTML)
    cicio

    1 réponse
    Apache2 accès à autre que /var/www/html/index.html
    merithes

    3 réponses