Please write your question in detail here.
We are doing a rails tutorial (4th edition, Chapter 5).
The footer layout of the login page that should be displayed at the bottom of the page is displayed on the right.
It is normally displayed below on other pages.
css is similar to that of the tutorial material.
The development environment uses macOS, Cloud9.

rails tutorial URL

Error message
Corresponding source code
/ * footer * /

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
   &: hover {
      color: $gray-darker;
  small {
    float: left;
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
<% provide (: title, "Log in")%>
 Log in 

  <% = form_for (: session, url: login_path) do | f |%>
    <% = f.label: email%>
    <% = f.email_field: email, class:'form-control'%>
    <% = f.label: password%>
    <% = link_to "(forgot password)", new_password_reset_path%>
    <% = f.password_field: password, class:'form-control'%>
    <% = f.label: remember_me, class: "checkbox inline" do%>
      <% = f.check_box: remember_me%>
      <span>Remember me on this computer</span>
    <% end%>
    <% = f.submit "Login", class: "btn btn-primary"%>
  <% end%>
  <p>New user?<% = Link_to "Sign up now!", Signup_path%></p>
<! DOCTYPE html>
  <title><% = full_title (yield (: title))%></title>
  <% = render'layouts/rails_default'%>
  <% = render'layouts/shim'%>
  <% = render'layouts/header'%>
    <% flash.each do | message_type, message |%>
      <% = content_tag (: div, message, class: "alert alert-# {message_type}")%>
    <% end%>
    <% = yield%>
    <% = render'layouts/footer'%>
    <% = debug (params) if Rails.env.development?%>

    The  Ruby on Rails Tutorial 
    by  Michael Hartl 
    <li><% = link_to "About", about_path%></li>
    <li><% = link_to "Contact", contact_path%></li>
Login page with broken layout Other pages displayed normally What I tried

In the SCCS file, I fixed the footer position using position: absolute ;, but the layout of other normally written pages was broken.

Please describe here what you have tried for the problem.

Supplementary information (FW/tool version, etc.)

Please provide more detailed information here.

  • Answer # 1

    I think that the layout is broken because is not closed.
    session/new.html.erbAt the end ofLet's add.

Related articles