Im trying to do this with div and css

the black border is the main div that will content all other div

but there is only the main-menu div that is inside he main-content, other are outside of the div

#main-content

{

    margin-left:auto;

    margin-right:auto;

    margin-top:10px;

    width:1000px;

    height:700px;

    position:absolute;

    border:2px solid black;

}


#main-footer

{

    position:relative;

    bottom:0;

    left:0;

    width:100%;

    height:60px;

    border:1px solid green;

}


#main-menu

{

    width:25%;

    height:100%;

    position:relative;

    border:1px solid red;

}


#main-flag

{

    width:100%;

    height:60px;

    float:left;

    border:1px solid purple;

}


#main-title

{

        width:100%;

    height:60px;

    float:left;

    border:1px solid cyan;

}

It might be because your #main-content has an absolute position, what happens if you give it position:relative; or remove position:absolute;?

Edit: P.S. Welcome to the forum

Edited June 24, 201313 yr by teodora

Teodora is right, it does sound like the absolute positioning sending it out of the container.

 

That said, I probably wouldn't recommend building a layout like this with absolute and relative positioning.

 

http://jsfiddle.net/jack_pallot/Xp9tK/

 

If it was fixed width this is probably how I would achieve it, this code just feels more re-usable and bit less prone to breaking. There's also some jQuery that re-sizes the menu column to the same height as the content.