Ez így miért nem jó? (HTML, CSS) Help pls

Sziasztok! Az lenne a problémám hogy amikor a container2-ben a diveknek a position-jét absolutera rakom, kilógnak a divek a sectionből ami a sárga rész(tehát nem növelik a magasságát) így az összes div a lap tetejére ugrik a section meg, marad a helyén! Hogy lehetne az megcsinálni hogy a section magasságát növeljék a divek így benne maradjanak a sárga területben?

Muszály position-t rakjak rájuk mert egy olyan táblázatot akarok csinálni amit <table>-el nem lehet és a divek a táblázat cellái!

Ez amivel gond van a 2. section! előtte van az első section az rendesen működik bár nem táblázat hanem egy div van benne amiben szöveg van!Az 1.nél benne van a sárga területben(section=sárga terület) a szöveg és növeli is a magasságát!

Kód:

HTML:

<section>

<div id="cointainer2">

<div id="bf">g</div>

<div id="kf">g</div>

<div id="jf">g</div>

<div id="bk">g</div>

<div id="jk">g</div>

<div id="ak">g</div>

</div>

</section>

CSS:

section:nth-child(2) {

width:100%;

background:yellow;

padding:5px 0px;

margin:30px 0px 25px 0px;

font-family:Arial;

}

#cointainer2 {

margin:auto;

width:1000px;

background:purple;

}

#bf {

background:gray;

position:absolute;

top:0px;

left:0px;

width:349px;

height:100px;

}

#kf {

background:rgb(230,230,230);

position:absolute;

top:0px;

width:300px;

height:100px;

border-left:1px solid black;

border-right:1px solid black;

}

#jf {

background:gray;

position:absolute;

top:0px;

right:0px;

width:349px;

height:100px;

}

#bk {

background:gray;

position:absolute;

top:0px;

left:0px;

width:499px;

height:50px;

border-top:1px solid black;

border-right:1px solid black;

}

#jk {

background:gray;

position:absolute;

top:0px;

right:0px;

width:500px;

height:50px;

border-top:1px solid black;

}

#ak {

background:orange;

position:absolute;

top:0px;

left:0px;

width:1000px;

height:100px;

border-top:1px solid black;

}