Images sur les cotés d'un container

Thom Leroy
Les bases HTML/CSS

Bonjour à tous.
Je viens ici parce que j'ai un petit blocage. Sur un site que je code je souhaiterais mettre deux images sur les cotés de mon container, seul soucis, lorsque j'arrive à mettre mes images, le contenu se décale vers le bas, et je bloque comme ça.

J'ai le code ici (J'utilise Blade) :

<body>
    <img class="sidebanner1" src="{{ URL::asset('images/sidebanner1.png') }}">
    <img class="sidebanner2" src="{{ URL::asset('images/sidebanner2.png') }}">
    <div class="container">
        <div style="text-align: center; margin-top: 100px;" class="row titre">
            <div class="col-md-11">
                @yield('title')
            </div>
        </div>
        <div class="row maindiv">
            @yield('content')
        </div>
    </div>
 ...

Avec ce css :

.sidebanner1{
    position: absolute;
    float: left;
}
.sidebanner2{
    float: right;
}

Ce qui donne cette page : http://hpics.li/d469b1e Avec le contenu qui se place en dessous de la page du coup.

Si je ne met pas de css sur le sidebanner2, le premier sidebanner se place correctement, le contenu suit, mais le deuxieme se place en dessous du contenu.

Avez vous des idées qui pourraient m'aider ? Merci d'avance !

2 réponses

Balsakup
Réponse acceptée

Salut, faut tout mettre en float si tu veux que tout soit à la même hauteur.
Le positiob absolute sert à rien

Example de HTML

Solution 1 (https://jsfiddle.net/8pzob64r/)

<img src="..." alt="..." class="a_gauche">
<div class="au_milieu">

</div>
<img src="..." alt="..." class="a_droite">
.a_gauche {
    float: left;
}

.a_droite {
    float: right;
}

.a_gauche, .a_droite {
    width: 100px;
}

Solution 2 (Si tu t'en fou de IE < 10) (https://jsfiddle.net/pnr0yqmx/1/)

<div class="site">
  <aside class="site__sidebar-left">

  </aside>
  <main class="site__content">

  </main>
  <aside class="site__sidebar-right">

  </aside>
</div>
.site {
  display: flex;
}

.site .site__content {
  flex: 1;
}

.site .site__sidebar-left, .site .site__sidebar-right {
  flex: 100px 0 0;
}
Lenny Obez

Bonjour,

Il y a encore la possibilité avec les sélecteurs CSS ::before & ::after qui nécessiteront moins de travail pour un résultat identique (à condition que tu ne fais qu'ajouter des images et sans lien).

Lenny Obez