This project is read-only.

Part 10: Album Grid showing wrong alignment


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>
    <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>
    <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>
      @{Html.RenderAction("GenreMenu", "Store");}
    <div id="main">

    <div id="footer">
        built with <a href="">ASP.NET MVC 4</a>
#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)
                <a href="@Url.Action("Details", new { id = album.AlbumId })">
                    <img alt="@album.Title" src="@album.AlbumArtUrl" />
#this is my GenreMenu.cshtml code

@model IEnumerable<MvcMusicStore.Models.Genre>

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

file attachments


graymond wrote Jun 12, 2014 at 5: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 9:15 PM


overflow: hidden;
padding: 0 0 15px 10px;
float: left;

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