zmarcoz
11-21-2012, 08:21 AM
I modify online CSS example for my code. Basically it has header, footer and 4 columns (The third column is 55% width and the rest are 15% width). I put them into a master template, but the master template does not exactly like what I expected.
1. sometimes COL4 is disappear (SEE the picture)
2. sometimes header area is in the same horizontal level as COL1, COL2, COL3 areas.
How to fix it? Thanks
My Master Template Code
<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
body{
background:#123456;
}
#container{
margin: 0 12.5%;
background:#FFF;
}
.col{
float:left;
margin:0;
width: 15%;
min-height:80%
}
#col3{
width:55%;
}
.col:nth-of-type(2n){
background:#CCC; /* just to see the cols */
}
#header, #footer{
height:100px;
clear:both;}
#MyRow{
height:100px;
clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="header"><asp:ContentPlaceHolder ID="HeadContent1" runat="server">
<p>Header area</p>
</asp:ContentPlaceHolder> </div>
<div id="col1" class="col"> <p>COL1 Area</p> </div>
<div id="col2" class="col"> <p>COL2 Area</p></div>
<div id="col3" class="col3"><asp:ContentPlaceHolder ID="MainContent" runat="server">
<p style="width: 41.25%">COL3 Area</p>
</asp:ContentPlaceHolder></div>
<div id="col4" class="col"> <p>COL4 Area</p></div>
<div id="footer"> <p>footer area</p></div>
</div>
</body>
</html>
My HTML code
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
aaa
</asp:Content>
http://s18.postimage.org/gycj07f61/Capture.png
1. sometimes COL4 is disappear (SEE the picture)
2. sometimes header area is in the same horizontal level as COL1, COL2, COL3 areas.
How to fix it? Thanks
My Master Template Code
<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
body{
background:#123456;
}
#container{
margin: 0 12.5%;
background:#FFF;
}
.col{
float:left;
margin:0;
width: 15%;
min-height:80%
}
#col3{
width:55%;
}
.col:nth-of-type(2n){
background:#CCC; /* just to see the cols */
}
#header, #footer{
height:100px;
clear:both;}
#MyRow{
height:100px;
clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="header"><asp:ContentPlaceHolder ID="HeadContent1" runat="server">
<p>Header area</p>
</asp:ContentPlaceHolder> </div>
<div id="col1" class="col"> <p>COL1 Area</p> </div>
<div id="col2" class="col"> <p>COL2 Area</p></div>
<div id="col3" class="col3"><asp:ContentPlaceHolder ID="MainContent" runat="server">
<p style="width: 41.25%">COL3 Area</p>
</asp:ContentPlaceHolder></div>
<div id="col4" class="col"> <p>COL4 Area</p></div>
<div id="footer"> <p>footer area</p></div>
</div>
</body>
</html>
My HTML code
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
aaa
</asp:Content>
http://s18.postimage.org/gycj07f61/Capture.png