CSSのレイアウトについて

Question

###前提・実現したいこと
rails4で開発中。
CSSでページのレイアウト構成をしていて２カラムの構成を実装したいと思っています。

実現したいのは上記の画像のような構成です。

###発生している問題・エラーメッセージ
通常の2カラムの構成はできるのですが、メインとなる中央のカラムの中身が今回はeachメソッドで記述していて、そのeachメソッドで呼び出した内容が全て横に列になって表示されてしまいます。

画像のようにeachメソッドで呼び出した内容は下に列になって表示させたいのですが、どのようにすればいいのでしょうか？

又、こういうレイアウトを実現させる場合、CSSではなくBootstrapなどを使用した方が適切なのでしょうか？

説明が分かりづらく申し訳ございませんが、ご教授よろしくお願いします。

###該当のソースコード
現在は下記のように記述しております。

view

<div class="container">
  <% @user.tweets.each do |tweet| %>
    <div class="mainBox">
      <p><%= tweet.content %></p>
    </div>
  <% end %>

  <div class="subBox">
    <%= render 'followers' %>
  </div>
</div>

css

.user-main {
  width: auto;;
}

.subBox  {
    float: left;
    width: 300px;
    padding: 30px 5px;
    margin-left: 80px;
}

.mainBox {
    float: right;
    width: 400px;
    padding: 30px 5px;
    margin-right: 80px;
}

Answer 1

rubyは不勉強ですが、多分こういうことでは。

<div class="container">
  <div class="mainBox">
    <% @user.tweets.each do |tweet| %>
      <div class="tweetBox">
        <p><%= tweet.content %></p>
      </div>
    <% end %>
  </div>

  <div class="subBox">
    <%= render 'followers' %>
  </div>
</div>

こういうレイアウトを実現させる場合、CSSではなくBootstrapなどを使用した方が適切なのでしょうか？

BootstrapもCSSでレイアウトしていますし、位置を調整したりする際にはCSSの知識が必要になります。HTML/CSSについて、一度本屋で何冊か本を買って読むとのがお勧めです。

Comments

[lapi]

ご回答ありがとうございます。
kei344さんの記述通りやったら理想の通りにレイアウトできました。
答えを知ってしまったら「なるほど、確かにこうだよな」と思えるのですが、なかなか自分の中でこの答えにまでたどり着くことができずにいました。

確かにBootstrapもCSSでレイアウトしますし、一度CSSについて復習し直してみようと思います。
ありがとうごさいました。