Question

I want to make a layout where the container div has 4 children divs which are expanding from corners of the container div. Each div expands from one corner. I want to achieve this without setting position absolute to the childreen because this messes with my other css. This is where it stopped:
jsFiddle: http://jsfiddle.net/XcKYF/2/

<div class=container>
<div class=div1>11</div>
<div class=div2>22</div>
<div class=div3>33</div>
<div class=div4>44</div>
</div>

.container
{
width:100%;
height:100%;
background-color:red;
}
.div1
{
position:absolute;
bottom:0;
left:0;
width:20px;
height:20px;
background-color:green;
}
.div2
{
position:absolute;
bottom:0;
right:0;
width:20px;
height:20px;
background-color:yellow;
}
.div3
{
position:absolute;
top:0;
left:0;
width:20px;
height:20px;
background-color:blue;
}
.div4{
position:absolute;
top:0;
right:0;
width:20px;
height:20px;
background-color:violet;}

Answer 1

Demonstration: http://jsfiddle.net/94U4U/1/

I think what you are looking for is a relatively positioned container that takes up the page, which is divided up into 4 corners plus a central content holder:

html, body{
  height:100%;
}
.container
{
  position:relative;
  width:100%;
  height:100%;
  background-color:red;
}

.container div.corner{
  height:20%;
  width:20%;
  position:absolute;
}

.container div.content{
  background-color:white;
  height:60%;
  width:60%;
  position:absolute;
  left:20%;
  top: 20%;
}

.div1
{
  bottom:0;
  left:0;
  background-color:green;
}

.div2
{
  bottom:0;
  right:0;
  background-color:#FF0;
}

.div3
{
  top:0;
  left:0;
  background-color:blue;
}

.div4
{
  top:0;
  right:0;
  background-color:#EE82EE;
}