1
Vote

Part 10: Album Grid showing wrong alignment

description

When I am clicking on Classical music, it shows wrong alignment, but when I click on Disco it shows right alignment.
#this is my layout.cshtml code:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")" type="text/javascript"></script>
</head>
<body>
    <div id="header">
        <h1><a href="/">ASP.NET MVC MUSIC STORE</a></h1>
        <ul id="navlist">
            <li class="first"><a href="@Url.Content("~")" id="current">Home</a></li>
            <li><a href="@Url.Content("~/Store/")">Store</a></li>
            <li>@{Html.RenderAction("CartSummary", "ShoppingCart");}</li>
            <li><a href="@Url.Content("~/StoreManager/")">Admin</a></li>
        </ul>        
    </div>
      @{Html.RenderAction("GenreMenu", "Store");}
    <div id="main">
        @RenderBody()
    </div>

    <div id="footer">
        built with <a href="http://asp.net/mvc">ASP.NET MVC 4</a>
    </div>
</body>
#and this is my browse.cshtml code 

@model MvcMusicStore.Models.Genre
 
@{
    ViewBag.Title = "Browse Albums";
}
 
<div class="genre">
    <h3><em>@Model.Name</em> Albums</h3>
 
    <ul id="album-list">
        @foreach (var album in Model.Albums)
        {
            <li>
                <a href="@Url.Action("Details", new { id = album.AlbumId })">
                    <img alt="@album.Title" src="@album.AlbumArtUrl" />
                    <span>@album.Title</span>
                </a>
            </li>
        }
    </ul>
</div>
#this is my GenreMenu.cshtml code

@model IEnumerable<MvcMusicStore.Models.Genre>

<ul id="categories">
    @foreach (var genre in Model)
    {
        <li>@Html.ActionLink(genre.Name, 
                "Browse", "Store", 
                new { Genre = genre.Name }, null)
        </li>
    }
</ul>
I have also attached some snapshots.

file attachments

comments

graymond wrote Jun 12, 2014 at 4:26 PM

I've got the same problem, to fix this problem I remove the line below in Site.css from main class :
float: left;

mahernoz wrote Nov 1, 2014 at 8:15 PM

main

{
overflow: hidden;
padding: 0 0 15px 10px;
float: left;
width:700px;
}

i set the width to 700px, this solved my problem.