3 columns inside a container div

columns poking out the bottom

[HelenDev]

I want the container div (#mainpagearea)to always be longer than the columns, but it's not - is this possible? Here is my code:

#mainpagearea{
background-color:#99CCCC;
height:100%;
width:100%;
padding:5px;
}

#leftmenu {
position: absolute;
left: 0px;
font-size: 12px;
padding: 10px;
width:20%;
background-color:#cccccc;
text-align: left;
} 

#middlesection {
font-size: 12px;
border-left:#009966 1px solid;
padding-left: 10px;
padding-right: 10px;
width:auto;
border-right:#009966 1px solid;
margin-left:25%;
margin-right:25%;
background-color:#ccffcc;
text-align: left;
}

#rightmenu {
position: absolute;
right: 0px;
font-size: 12px;
padding: 10px;
width:20%;
text-align:right;
background-color:#ffffcc;
text-align: left;
}

[createErrorMsg]

Helen, the problem here is absolute positioning. Absolute pos removes elements entirely from the flow. This means that other elements no longer interact with them, including parent containers. The only one of your columns that will affect the length of the container is the middle column, which is a normal, in the flow, column. If you can be certain it will always have more content than the sidebars, you should be okay. But if the sidebars ever get longer than the content, they will overlap the footer.

An option would be to leave the knit-pixeling of absolute positioning behind and use another method to create your layout...floats, perhaps, or relative positioning. This way you would be working with containable elements.

Are there solutions to this dilema without abandoning absolute positioning? Possibly. It might be worth trolling the css sites for 3 column tutorials until you find one that uses absolute positioning and see how they explain solving the problem you're having. Bluerobot.com may have something, as well as positioniseverything.net.

[mincklerstraat]

you can also try an 'automatic' layout machine like [csscreator.com...]