Two divs next to each other which add up to 100% width - one appears below the other?

I have a container div which is centred at 50% of the page width. This has 10px padding and position relative. I then have a div inside this which is set to width 80%, float left and is a different colour, and also has padding of 10px. There is another div set to float right which has width 20%. Neither of the nested divs have a border or margin. However the right one appears below the other one only up to a particular screen size.

My html / css is as follows:

<html>
    <head>
        CSS file included here
    </head>
    <body>
        <div class="page-container">
            <div class="right-col"></div>
            <div class="left-col"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>


.page-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.left-col {
    width: 80%;
    float: left;
}

.right-col {
    width: 20%;
    float: right;
}

.clear {
    clear: both;
}

This has been bugging me for ages so I would appreciate any help anyone can give me. Thanks in advance.

Regards,

Richard

Solution

Your example doesn't contain any padding and looks the same at any screen size. If you add padding to the left div it gets added to the total width so it gets a width of 80% + 20px. If your content in the left div needs some padding add another div inside it with a 10px margin.

   <div class="page-container">
        <div class="right-col"></div>
        <div class="left-col">
            <div class="left-col-inner"></div>
        </div>
        <div class="clear"></div>
    </div>

css

.left-col-inner{
margin:10px;
}