CSS problem: Fixed column + Auto column with a nested Auto column inside

I got the following HTML structure:

<div id="main-container">
    <div id="left-column">...</div>
    <div id="right-column">...</div>
</div>

My CSS:

#main-container
{
    width:80%;
    margin:20px auto;    
}

#left-column
{
    width:400px;
    float:left;
}

#right-column
{
    width:100%;
    float:right;
    padding:26px 0 0 0;
}

Very typical layout, nothing fancy. What I cannot understand though is why the right-column instead of taking up the the space it has in the main-container (so 80% of the whole screen minus 400px) it spans the whole main-container and gets pushed below the left-column.

I tried setting it's width to 70% and it's okay until I resize the window, then the right-column overlaps the left on开发者_高级运维e.

Thanks!

Setting the width of the right column to 100% means it is going to take the full width of the container, and not the full width minus other elements within the container.

I suggest you achieve the column by column structure (where one column has a fixed width and the other takes the remaining space) as follows:

#left-column
{
    width: 400px;
    float: left;
}    
#right-column
{
    padding: 26px 0 0 0;
    margin-left: 410px;
}

Here is an example.

What I cannot understand though is why the right-column instead of taking up the the space it has in the main-container (so 80% of the whole screen minus 400px)

This is because width: 100%; is 100% of its containing element (100% of #main-container) - the #right-column does not care about 400px on any sibling element (i.e. #left-column)