CSS DivBoxes

[namelessguy]

I'm trying to create a large div box with 4 smaller div boxes positioned inside. The problem is the large box just won't appear so text which would be outside the box is appearing with the smaller boxes on top (if that makes sense)

here's the css code i'm using to try and do this:

#steps_box {
left: 10%;
width: 100%;
height: 40%;
background-color: #ffffff;
}

#step1 {
position: absolute;
left: 12%;
width: 20%;
height: 20%;
background-color: #faf1ff;
}

#step2 {
position: absolute;
left: 32%;
width: 20%;
height: 20%;
background-color: #f4ddff;
}

#step3 {
position: absolute;
left: 52%;
width: 20%;
height: 20%;
background-color: #f0d3ff;
}

#step4 {
position: absolute;
left: 72%;
width: 20%;
height: 20%;
background-color: #eac0ff;
}

Any help will be greatly appreciated.

[photon]

Hi namelessguy, welcome to WebmasterWorld!

When you add "position:absolute;" to the four sub-boxes, they are positioned according to the next highest container which is also positioned. Since your main box is not positioned, the positions of the sub-boxes are set relative to the body of the document.

Try adding "position:relative;" to the large div box.

[namelessguy]

Thanks for the welcome and help.

That did create the large div box but is there anyway for me to get a paragraph of text to appear below the large div box and not layered underneath?