Question

I’m creating a little dashboard page using CSS, i’m just planning the layout and div’s i would need to use. I can’t help but think i’m making this more complicated than it is. I’ve created the below image with a each colour meaning a different div.

The main outer red will the content div on the page. I’m unsure if i’ll need the grey and the blue div’s? Or would the the dark red div be above the grey one yet below the blue one.

Apologies for this pretty daft drawing, but i thought it was best to try and show what i was thinking.

thanks

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.