Ch. 3 pg. 75 Try It Out Trouble

rexcampbell · August 12th, 2010, 04:01 PM

I'm having trouble getting my side bar to float with my main content area. My side bar wants to be between the main content area and the floater when I view it in design mode. As far as I can tell, my Style Sheet code is looking right and everything looks where it should be in the Markup View. HALP!

Imar · August 12th, 2010, 06:25 PM

Hi there,

Can you post the final HTML code for the page and for the CSS files that it's referencing? Otherwise, it's pretty impossible to say anything useful.

When you post code, please use the Remove Text Formatting on the toolbar and wrap your code in code tags. That makes it easier to read.

Cheers,

Imar

rexcampbell · August 16th, 2010, 06:30 PM

Alright, here is the default code page:

Code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <style type="text/css">
        .style1
        {
            color: #009933;
        }
    </style>
    <link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
    <div id="Header">Header Goes Here</div>
    <div id="MenuWrapper">Menu Goes Here</div>
    <div id="Main Content">
    <h1>
            Hi there visitor and welcome to Planet Wrox</h1>
        <p>
            We're glad you're <span class="style1">paying a visit</span> to
            <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a> , the coolest music 
            community site on the Internet.</p>
        <p>
            Feel free to have a look around; as there are lots of interesting <b>reviews and 
            concert pictures</b> to be found here.</p></div>
    <div id="Sidebar">Sidebar Goes Here</div>
    <div id="Footer">Footer Goes Here</div>
    </div>
    </form>
</body>
</html>

And here is the styles page:

Code:

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

*
{
    font-family: Arial;
}

h1
{
    font-size: 20px;
}

#PageWrapper
{
    width: 844px;
}

#MenuWrapper
{
    width: 844px;
}

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

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

Hope I posted that right. Thanks for the input.

Imar · August 17th, 2010, 02:17 AM

Yep, you posted that right......;-)

Take a look at this:

Code:

<div id="Main Content">

There's a space between Main and Content which causes the MainContent class to not be applied. Once you remove the space the SIdebar jumps in place.
Then you'll notice that the Footer is not behaving because your style sheet is missing this rule set:

Code:

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

Hope this helps,

Imar

rexcampbell · August 17th, 2010, 02:29 AM

Alright, all is as it should be. Thanks for the help.