Mise en page CSS en utilisant divs

Question

Je crée une petite page de tableau de bord en utilisant CSS, je suis juste en train de planifier la disposition et div que je devrais utiliser. Je ne peux pas m'empêcher de penser que je rends cela plus compliqué que ça ne l'est. J'ai créé l'image ci-dessous avec un chaque couleur signifiant un div différent.

La principale extérieure rouge sera le div contenu de la page. Je ne sais pas si je vais avoir besoin de la div gris et bleu? Ou le div rouge sombre serait-il au-dessus du gris mais au-dessous du bleu. Toutes mes excuses pour ce joli dessin stupide, mais je pensais qu'il était préférable d'essayer de montrer ce que je pensais.

grâce

Answer 1

Try this ...

<div id="wrap"> 

<div class="box"> 
    <div class="title"> 
     <span class="left">Title</span> 
     <span class="right">Link</span> 
    </div> 
    <div class="results">Results here...</div> 
</div> 

<div class="box"> 
    <div class="title"> 
     <span class="left">Title</span> 
     <span class="right">Link</span> 
    </div> 
    <div class="results">Results here...</div> 
</div> 

<div class="box"> 
    <div class="title"> 
     <span class="left">Title</span> 
     <span class="right">Link</span> 
    </div> 
    <div class="results">Results here...</div> 
</div> 

<div class="box"> 
    <div class="title"> 
     <span class="left">Title</span> 
     <span class="right">Link</span> 
    </div> 
    <div class="results">Results here...</div> 
</div> 

</div> 

#wrap {} 
.box {display: inline-block; width: 400px; height: 400px; border: 1px solid blue; margin: 0 25px 50px 0;} 
.title {position: relative; border: 1px solid red;} 
.title span {position: absolute; top: 0; display: inline-block;} 
.title .left {left: 0;} 
.title .right {right: 0;} 
.results {} 

Hope it helps.