CSS Layout с помощью divs

Question

Я создаю небольшую страницу панели инструментов с помощью CSS, я просто планирую макет и div, которые мне нужно будет использовать. Я не могу не думать, что я делаю это более сложным, чем это. Я создал изображение ниже с каждым цветом, означающим другой div.

Основной внешний красный будет ли DIV содержимое страницы. Я не уверен, что мне нужен серый и синий дивы? Или темно-красный div будет выше серого, еще ниже синего.

Извинения за этот довольно рывкий рисунок, но я подумал, что лучше попробовать и показать, о чем я думал.

благодаря

Answer 1

Попробуйте это ...

<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 {} 

Надеется, что это помогает.