Create 5 DIVs with 1 DIV in the center

Question

I want to create a DIV as shown in the image below. 1 div in the center and 4 div around the center div. Can anyone help? I tried, but I could not do it.

.mid{ width:700px; height:400px; margin-left:100px; background-color:black; } .navtop { width:700px; height:100px; display: inline-block; background-color:red; } .navbottom { width:700px; height:100px; background-color:red; display: inline-block; } .navleft { width:100px; height:400px; float:left; margin-top:100px; display: inline-block; background-color:red; } .navright { width:100px; height:400px; display: inline-block; background-color:red; } 

The content will be static. I have a problem with the right and bottom div.

Answer 1

http://jsfiddle.net/z2qQG/2/

 `<style> #container{width:500px;height:500px;} #div1{width:300px;height:100px;margin:auto;background:#000;color:#fff;} #div2{width:100px;height:300px;float:left;background:#000;color:#fff;} #div3{width:300px;height:100px;margin:auto;background:#000;color:#fff;} #div4{width:100px;height:300px;float:left;background:#000;color:#fff;} #div5{width:300px;height:300px;float:left;background:#fff;} </style> <div id="container"> <div id="div1">DIV 1</div> <div id="div4">DIV 4</div> <div id="div5">DIV 5</div> <div id="div2">DIV 2</div> <div id="div3">DIV 3</div> </div>` 

Answer 2

 <style> #div1 { height: 100px; width: 300px; margin-left: 100px; background: orange; } #div4 { height: 300px; width: 100px; float: left; background: red; } #div5 { height: 300px; width: 300px; float: left; background: blue; } #div2 { height: 300px; width: 100px; float: left; background: lime; } #div3 { height: 100px; width: 300px; margin-left: 100px; clear: both; background: aqua; } </style> <div id="div1">DIV1</div> <div id="div4">DIV4</div> <div id="div5">DIV5</div> <div id="div2">DIV2</div> <div id="div3">DIV3</div> 

That would be the most obvious way. There are several other ways.

Answer 3

CSS-wise, I would probably leave position: relative; DIV 5 and position: absolute; the rest, and then moved them with upper, lower, left and right properties.

 #wrap {margin: 100px; width: 400px; height: 400px; position: absolute; background: black;} .side {position: absolute; background: red; width: 100%; height: 100%;} .side.top {height: 100px; top: -100px;} .side.bottom {height: 100px; bottom: -100px;} .side.left {width: 100px; left: -100px;} .side.right {width: 100px; right: -100px;} <div id="wrap"> <div class="side top"></div> <div class="side bottom"></div> <div class="side left"></div> <div class="side right"></div> </div> 

Example

Answer 4

Yeah. Pretty simple :)

http://jsfiddle.net/x5FrV/1

 .wrap { position:relative; ... } .border { position:absolute; width:20px; height:20px; ... } .top { bottom:100%; width:100%; } .right { left:100%; height:100%; } .bottom { top:100%; width:100%; } .left { right:100%; height:100%; } 

 <div class="wrap"> <div class="top border">1</div> <div class="right border">2</div> <div class="bottom border">3</div> <div class="left border">4</div> <div class="content"> go team sea slug! </div> </div> 

Answer 5

There are many ways, so in fact it depends more on the “why” than on the “how”, but if the client told me this, my first blow would look something like this:

 <div id="div5"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> Content </div> 

with css like:

 #div5 { position: relative; margin: 3em; background-color: red; width: 10em; height: 10em; } #div1,#div2,#div3,#div4 { position: absolute; background-color: black; color: white; } #div1, #div3 { width: 100%; height: 2em; } #div1 { top: -2em; } #div3 { bottom: -2em; } #div2, #div4 { height: 100%; width: 2em; } #div2 { right: -2em; } #div4 { left: -2em; } 

Spell here