어플리케이션 레이아웃 코드 – 3단3열구조

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title><%= h(yield(:title) || "Untitled") %></title>
    <%= stylesheet_link_tag 'application' %>
    <%= yield(:head) %>
  </head>
  <body>
    <div id="container">
      <div id="head">
        <div id="user_nav">
          <% if current_user %>
            <%= link_to "Edit Profile", edit_user_path(:current) %> |
            <%= link_to "Logout", logout_path %>
          <% else %>
            <%= link_to "Register", new_user_path %> |
            <%= link_to "Login", login_path %>
          <% end %>
        </div>
        <div>[head]</div>
        <%= render :file=>"layouts/head.html.erb" %>
      </div>
      <div id="trunk">
        <div id="col-left">
          <div>[trunk>col-left]</div>
          <%= render :file => "layouts/col_left.html.erb" %>
        </div>
        <div id="col-center">
          <div>[trunk>col-center]</div>
          <div>
            <%- if show_title? -%>
              <h1><%=h yield(:title) %></h1>
            <%- end -%>

            <%- flash.each do |name, msg| -%>
              <%= content_tag :div, msg, :id => "flash_#{name}" %>
            <%- end -%>

            <%= yield %>
          </div>
        </div>
        <div id="col-right">
          <div>[trunk>col-right]</div>
          <%= render :file=>"layouts/col_right.html.erb" %>
        </div>
      </div>
      <div id="foot">
        <div>[foot]</div>
        <%= render :file=>"layouts/foot.html.erb" %>
      </div>
    </div>
  </body>
</html>

작성자 : 닥터최

기본 레이아웃 CSS – 3단3열구조

#container {
  width: 1024px;
  margin: 0 auto;
  background-color: transparent;
  /*padding: 0;*/
  /*border: solid 1px red;*/
  /*margin-top: 0;*/
  /*text-align:left;*/
}

#head {
  position:relative;
  width: 100%;
  min-height:30px;
  /*margin: 0 auto;*/
  background-color: #FFF;
  padding: 20px 0;
  border: solid 1px black;
  margin-top: 20px;
}

#trunk {
  position:relative;
  width: 100%;
  /*margin: 0 auto;*/
  min-height:300px;
  background-image:url(../images/column.png);
  background-color: #FFF;
  padding: 0;
  border: solid 1px black;
  margin-top: 5px;
  overflow:auto;
}

#col-left {
  width:200px;
  margin:0;padding:0;
  float:left;
  position:relative;
}
#col-center {
  width:624px;
  margin:0;padding:0;
  float:left;
  position:relative;
}
#col-right {
  width:200px;
  margin:0;padding:0;
  float:left;
  position:relative;
}

#foot {
  position:relative;
  width: 100%;
  min-height:30px;
  /*margin: 0 auto;*/
  background-color: #FFF;
  padding: 20px 0;
  border: solid 1px black;
  margin-top: 5px;
}

작성자 : 닥터최