Ch 3 alignment issue with CSS float

proslambano · January 4th, 2015, 06:12 AM

Hi, I can't get the chapter 3 sidebar to align properly with the Main Content. Both are floated left, and the float works -- which I verified by increasing the height of the sidebar -- but the tops don't look right. It looks like I have the nav bar on one row, then the sidebar on another row, but far to the right, then the Main Content on a 3rd row, but to the left. I attached a link to two pics at dropbox that makes it more obvious - one from browser, the other from VS 2013 Design View. In the Visual studio Designer, nav bar and Main Content are close together and the text in the sidebar aligns perfectly with Main Content.

https://dl.dropboxusercontent.com/u/...loat-issue.PNG

https://dl.dropboxusercontent.com/u/...gn-View-VS.PNG

Here's my code:
Styles.css

Code:

* {
    font-family: Arial;
}

header {
    background-color: silver;
    width: 844px;
    height: 86px;
}

h1 {
    font-size: 20px;
}

#PageWrapper {
    width: 844px;
    margin: auto;
}

nav {
    width: 844px;
}

/*#region Main Content */
section#MainContent {
    width: 664px;
    float: left;
}

    section#MainContent a {
        color: #4cff00;
        text-decoration: underline;
    }

        section#MainContent a:visited {
            color: #FF0000;
            text-decoration: underline;
        }

        section#MainContent a:hover {
            color: #FFA500;
            text-decoration: underline;
        }
/*#endregion */


aside {
    background-color: gray;
    width: 180px;
    height: 150px;
    float: left;
}

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

Default.aspx

Code:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            color: #FF0000;
        }
    </style>
    <link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
        <header>Header goes here</header>
        <nav>Menu goes here</nav>
        <section id="MainContent">
            <h1>Hi there visitor and welcome to Planet Wrox</h1>
            <p>
                We're glad you're <span class="auto-style1">paying a visit </span>to <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the coolest music community on the Internet.</p>
            <p>
                Feel free to have a <a href="Default.aspx">look around</a>, there are lots of interesting <strong>reviews and concert pictures</strong> to be found here.</p>
        </section>
        <aside id="Sidebar">Sidebar Goes Here</aside>
        <footer>Footer Goes Here</footer>
    </div>
    </form>
</body>
</html>

proslambano · January 4th, 2015, 06:48 AM

The Try It Out "Creating Embedded and Inline Styles in a Page" on page 93-94 fixed this problem.

No need to respond. Thanks anyway! :)