Question

I am using Ruby on Rails 3. I would like to render a layout by using the content_for? method in order to “conditionally” generate HTML code with proper CSS properties. That is, I would like to implement a layout with the following features:

• if content_for a left column is present then the layout has 2 columns (a left column with fixed width and a content column with the remaining width);
• if content_for a left column is not present then the layout has 1 column (a content column with full width).

How can I implement it inside the /app/views/layouts/application.html.erb file? Have you some advices?

Note: Hopefully, I am looking for a sample implementation of the layout (including also Ruby on Rails methods, HTML and CSS code).

---

Bonus: Inside the content column block I would like to “conditionally” display a right column if content_for the right column is present.

Answer 1

You can use adjacent (+) or subsequent (~) sibling selectors to conditionally apply a margin to your content column based on whether or not the left column is visible.

For your bonus question, you should put the content of content column inside an inner wrap div, and then use the :nth-last-child to check whether or not the right column is visible and conditionally apply a margin there as well:

CSS:

.page {
  position: relative;
}

.page .left-column {
  background: lavender;
  left: 0;
  position: absolute;
  top: 0;
  width: 180px;
}

.page .content-column { background: orange; }

.page .content-column > .inner-wrap { background: rgba(255,255,255,0.3); }

.page .left-column + .content-column {
  margin-left: 200px;
}

.page .content-column .right-column {
  background: lime; 
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
}

.page .content-column > .inner-wrap:nth-last-child(2) {
  margin-right: 100px;
}

HTML:

<div class="page">

  <% if content_for?(:left_column) %>
    <div class="left-column">
      <%= yield(:left_column) %>
    </div>
  <% end %>

  <div class="content-column">
    <div class="inner-wrap">
      <%= yield(:content_column) %>
    </div>

    <% if content_for?(:right_column) %>
      <div class="right-column">
        <%= yield(:right_column) %>
      </div> 
    <% end %>          
  </div>

</div>

Preview of rendered layout: http://jsbin.com/icurey/8/edit