Can anyone assist with my issue? I am trying to add a header to my webpage, but I'm facing a problem where the order of div declarations determines their placement on the page. The first declared div appears on top, and the second one appears below, regardless of the position set. Here is the CSS code:
css;
body
{
background-color:#CCC;
}
#pageHeader{
position:relative;
width:900px;
height:94px;
background-color:White;
margin:0 auto;
}
#nhsLogo
{
position:relative;
margin-left:40px;
}
#openingHours
{
position:relative;
margin-left:500px;
top:0px;
}
Here is the HTML code:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Template.master.cs" Inherits="Template.Template" %>
<!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>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/default.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="pageHeader">
<div id="openingHours">
<p style="color:Green; font-size:18px; font-style:oblique;">0876 890756</p>
<p style="color:Purple; font-size:18px; font-style:oblique;">Opening hours</p> <p></p>
</div>
<div id="nhsLogo">
<p><img src="img/high.png" alt="GPlus logo" /></p>
</div>
</div>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript" src='<%# ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>