3 columns in <div>

I'm doing a Website with ASP.NET. I'm showing you the MasterPage, where I want that, the <div style="width:100%; border:2px double #ff0000; height:500px;"> in my HTML file will have three columns where I divide my content. The left one 10%, in the middle 80% and the right 10%. The last one(right) is where I'm having trouble. I've put borders to each div, so I can see the limits of each div and how are they being divided. The third column, instead of being put in the right, it goes down, in the bottom of the div. That's my first and principal problem I want to solve.

The second problem one is that in the div of 80% I would want all the information in the center, but not putting text-align:center; in CSS because it would not be pretty.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
            table 
            {
               -moz-border-radius:10px;
               -webkit-border-radius:10px;
                border-radius:10px;
            }
        </style>
    </head>
    <body style="margin-top:25px">
        <div style="width:100%; height:80px; border:2px solid #000000; z-index:4; text-align:center;">
            <div>
                <h1>Title</h1>
            </div>
        </div>
        <div style="width:100%; border:2px double #ff0000; height:500px;">
            <div style="width:10%; border:2px dotted #ffd800; height:100%; float:left;">

            </div>
            <div style="width:80%; border:2px dotted #b6ff00; height:100%; float:left;">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div style="float:left; border:5px dotted #ef8021; width:10%; height:100%;">
            </div>
        </div>
        <div style="bottom:0px; width:100%; height:75px; border:2px dashed #f117d2; z-index:0; text-align:center;">
            <div>
                <p>Visited <%=Application["mone"] %> people.</p>
                <p>Copyrights reserved.</p>
            </div>
        </div>
    </body>
</html>

Thanks!

Solution

Borders are applied around a DIV, so if you have a DIV with a width of 100 pixels and you applied a border of 1 pixel, you would end up with a DIV taking a total width of 102 pixels.

When you want to "see" the areas of your page, I'd rather apply a color to the background of the DIVs, as the background color does not change the intended size of HTML elements.

This is your page with the suggested edits (I've stripped ASP.NET code for readability):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
            table 
            {
               -moz-border-radius:10px;
               -webkit-border-radius:10px;
                border-radius:10px;
            }
        </style>
    </head>
    <body style="margin-top:25px">
        <div style="width:100%; height:80px; border:2px solid #000000; z-index:4; text-align:center;">
            <div>
                <h1>Title</h1>
            </div>
        </div>
        <div style="width:100%; border:2px double #ff0000; height:500px;">
            <div style="width:10%;background-color:#f88;height:100%;float:left"></div>
            <div style="width:80%;background-color:#8f8;height:100%;float:left">
                CONTENT_PLACEHOLDER
            </div>
            <div style="width:10%;background-color:#88f; height:100%;float:left"></div>
        </div>
        <div style="bottom:0px; width:100%; height:75px; border:2px dashed #f117d2; z-index:0; text-align:center;">
            <div>
                <p>Visited # people.</p>
                <p>Copyrights reserved.</p>
            </div>
        </div>
    </body>
</html>

I hope this helped :)