I am trying to build a site that contains a 2 column layout containing a Header and a Sidebar on the left. To help give you a quick idea of what I am trying to build, take a look at this site:
http://limpid.nl/lab/css/fixed/header-and-left-sidebarThe one thing that I want to do differently is to get rid of the fact that the Header and Left Sidebar are in an absolute position (which of course causes them to "Stick" to the upper and left sides of the page).
I have accomplished this to some extent but I have ran across two problems with what I have created.
1) The Left Sidebar expands the entire length of the body PLUS the height of the header. I just want it to expand all the way down to the bottom of the Browser window.
2) The Header does not expand to the right if the contents in the "Content Area" expand to the right larger than the browser window can display.
So my question is, based on the information provided above, could someone please help me develop the layout that i described above? I would prefer an answer in CSS.
Thanks.
<html xmlns="
http://www.w3.org/1999/xhtml"
>
<head id="Head1" runat="server">
<title>Layout</title>
<!-- STYLES -->
<link href="../CSS/GlobalStyles.
css" rel="stylesheet" type="text/css" />
<link href="../CSS/MainContentSt
yles.css" rel="stylesheet" type="text/css" />
<link href="../CSS/SideNavigatio
nBar.css" rel="stylesheet" type="text/css" />
<link href="../CSS/HeaderStyles.
css" rel="stylesheet" type="text/css" />
<!-- //END// -->
</head>
<body>
<form id="form1" runat="server">
<!-- Header Section -->
<div class="bannerMain">
</div>
<!--//END//-->
<!-- Side Navigation Bar -->
<div class="cssSideNavigationBa
rMain">
<div class="cssSideNavigationBa
rSection">
<asp:Image ID="Image1" ImageUrl="~/SidePanelImage
s/Header1.
jpg" runat="server" />
<asp:HyperLink ID="HyperLink2" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Page1
.aspx">Pag
e1</asp:Hy
perLink>
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Page2
.aspx">Pag
e2</asp:Hy
perLink>
<asp:HyperLink ID="HyperLink11" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Page3
.aspx">Pag
e3</asp:Hy
perLink>
</div>
<div class="cssSideNavigationBa
rSection">
<asp:Image ID="Image2" ImageUrl="~/SidePanelImage
s/Header2.
jpg" runat="server" />
<asp:HyperLink ID="HyperLink9" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Searc
hPage1.asp
x">SearchP
age1</asp:
HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Searc
hPage2.asp
x">SearchP
age2</asp:
HyperLink>
<asp:HyperLink ID="HyperLink5" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Searc
hPage3.asp
x">SearchP
age3</asp:
HyperLink>
<asp:HyperLink ID="HyperLink6" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Searc
hPage4.asp
x">SearchP
age4</asp:
HyperLink>
<asp:HyperLink ID="HyperLink7" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Searc
hPage5.asp
x">SearchP
age5</asp:
HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Searc
hPage6.asp
x">SearchP
age6</asp:
HyperLink>
</div>
<div class="cssSideNavigationBa
rSection">
<asp:Image ID="Image3" ImageUrl="~/SidePanelImage
s/Header3.
jpg" runat="server" />
<asp:HyperLink ID="HyperLink10" runat="server" CssClass="cssSideNavigatio
nBarItem" NavigateUrl="~/Pages/Page4
.aspx">Pag
e4/asp:Hyp
erLink>
<asp:HyperLink ID="lnkLogout" runat="server" Text="Page5" NavigateUrl="~/Pages/Page5
.aspx" CssClass="cssSideNavigatio
nBarItem">
</asp:Hype
rLink>
</div>
</div>
<!--//END//-->
<!--//MAIN CONTENT AREA HERE//-->
<div class="mainContent">
</div>
<!--//END MAIN CONTENT//-->
</form>
</body>
</html>
/* < Global Styles > */
/* ==========================
==========
==========
==========
==========
==========
==========
==========
==========
======= */
html
{
height: 100%;
width: 100%;
}
body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^ */
/* < Header Styles > */
/* ==========================
==========
==========
==========
==========
==========
==========
==========
==========
======= */
div.bannerMain
{
/* Blue */
background-color: #333399;
width: 100%;
display: block;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^ */
/* < Main Content Styles > */
/* ==========================
==========
==========
==========
==========
==========
==========
==========
==========
======= */
div.mainContent
{
padding: 20px 0px 0px 20px;
display: inline;
float: left;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^ */
/* < Left Sidebar Styles > */
/* ==========================
==========
==========
==========
==========
==========
==========
==========
==========
======= */
div.cssSideNavigationBarMa
in
{
background-color: Green;
height: 100%;
width: 152px;
float: left;
}
div.cssSideNavigationBarSe
ction
{
margin: 0px 0px 5px 0px;
}
.cssSideNavigationBarItem
{
display: block;
cursor: pointer;
color: White;
font-family: Arial;
font-size: small;
font-weight: bold;
text-decoration: none;
padding-left: 3px;
}
.cssSideNavigationBarItem:
Hover
{
display: block;
cursor: pointer;
color: White;
font-family: Arial;
font-size: small;
font-weight: bold;
background-color: Black;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^^^^
^^^^^^^ */
