Chapter 6: Sidebar Goes Here

CSharp0101 · April 13th, 2010, 02:41 AM

In chapter 6 the Sidebar is on the left side and not the right. I tried to change the CSS Code to right instead of left and not change. Here is the code that I have below.

<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header"><a class="HeaderLink" href="~/" runat="server">Header Goes here</a></div>
<div id="MenuWrapper">Menu Goes Here</div>
<div id="MainContent">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="SideBar">Sidebar Goes Here</div>
<div id="Footer">Footer Goes Here</div>
</div>
</form>

CSS Code Below:

#Sidebar
{
background-color: #808080;
width: 200px;
float: right;
}

CSharp0101 · April 13th, 2010, 02:48 AM

My CSS code shows Sidebar and I typed into the MasterPage SideBar. Lastly, in the book the CSS code has float: left so I changed it to float: right and now it matches what the image shows in the book.

Imar · April 13th, 2010, 03:31 AM

Hi there,

Take a look at the source for chapter 6 that comes with the book as a download. In Monochrome.css you find this:

Code:

 
 
#MainContent
{
  font-size: 0.8em;
  width: 659px;
  border-left: 1px solid white;
  border-right: 2px solid white;
  float: left;
  background-color: #e1e1e1;
  min-height: 500px;
  padding: 10px;
}
 
#Sidebar
{
  font-size: 0.8em;
  background-image: url(Images/Sidebar.jpg);
  background-repeat: no-repeat;
  background-color: #cccccc;
  width: 152px;
  min-height: 500px;
  padding-top: 10px;
  padding-left: 10px;
  float: left;
}

Both have a float left which causes them to end up side by side. This works if the id attributes of the MainContent and Sidebar (including capitalization) match the CSS selectors.

Hope this helps,

Imar