MainContent div ignores width setting?

hopper3011 · August 14th, 2012, 07:36 AM

Hi;

I can't get the MainContent div to accept the width setting from the .css stylesheet Styles.css. The box simply ignores the "664px" setting and uses the entire 844px, pushing the Sidebar onto the next line.

I have pasted the relevant code below, any suggestions would be gratefully received!

Code for Frontend.master:

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!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>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="pageWrapper">
        <div id="Header"><a href="~/" runat="server">Header Goes Here</a></div>
        <div id="MenuWrapper">Menu Goes Here</div>
        <div id="Main Content">
        <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>
</body>
</html>

Code for Styles.css:

Code:

#Header
{
    background-color: #C0C0C0;
    width: 844px;
    height: 86px;
}

*
{
    font-family: Arial;
}

h1
{
    font-size: 20px;
}

#PageWrapper
{
    width: 844px;
}

#MenuWrapper
{
    width: 844px;
}

#MainContent
{
    width: 664px;
    float: left;
}

#Sidebar
{
    background-color: Gray;
    width: 180px;
    float: left;
}

#Footer
{
    background-color: #C0C0C0;
    width: 844px;
    clear: both;
}

Imar · August 14th, 2012, 09:02 AM

Hi there,

You have a space between Main and Content in the id for the div element.....

Imar

hopper3011 · August 14th, 2012, 09:15 AM

Thank you Imar.