My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS:
body {
height: 95%;
width: 100%;
margin: 0 auto;
}
#HEADER{
height: 15%;
width: 100%;
border-bottom: 2px solid black;
}
#CONTAINER{
height: 85%;
}
#CONTENT{
height: 100%;
border-left: 2px solid black;
}
The CSS should control the following divs:
<body>
<div id="HEADER">
TITLE HERE
</div>
<div id="CONTAINER">
<div id="MENU">
</div>
<div id="CONTENT">
<asp:ContentPlaceHolder ID="CPH_Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="FOOTER">
</div>
</div>
I have included the CSS in the head section of my HTML like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Labo 2</title>
<link href="/CSS/main.css" rel="stylesheet" type="text/css"/>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
I have also ensured that the external CSS file is accessible by adding the necessary authorization in web.config:
<location path="CSS">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
If anyone could provide some guidance or explanations on why my CSS is not working properly, it would be greatly appreciated. JavaScript functions correctly, so it's specifically the CSS that's giving me trouble. Thank you!