Create 5 DIV with 1 DIV in the center

I want to create DIV like the picture below. 1 Div on the center and 4 div around the center div. Could anybody help??I've tried but I couldn't 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 right and bottom div.

---

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>`

---

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

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

---

There are a bunch of ways, so it really depends more on "why" than "how", but if a client said this to me, my first stab 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; }

Fiddle here

---

CSS-wise I would probably position: relative; DIV 5 and position: absolute; the rest, then moving them out with the top, bottom, 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

---

Yup. Fairly 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>