As I work on my Website using ASP.NET, I am customizing the MasterPage to divide the content into three columns within a div with specific widths for each column. However, I am facing an issue where the third column, which should be on the right, is instead appearing at the bottom of the div.
Another challenge I encounter is aligning all the information in the 80% width column to the center without using text-align:center in CSS.
<%@ 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>
Your insights are appreciated!