Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

CSSでfloatをかけた2カラムレイアウトを縦に並べたいのだが、ズレる。

More than 5 years have passed since last update.

いまちょっと困っているところ。

左右の2カラムからなり、右カラムはいくつかのボックスに分かれているレイアウトを作っている。
その際、単純にfloat:leftとrightで左右に配置しているのですが、floatは横に並べようとするため、
左カラム幅が少ないとき複数ボックスからなる右カラムがずれてしまう。

↓こんなかんじ。rightのboxをタテに並べたいのだが横に回り込んでしまう。
https://img.skitch.com/20120108-j5j4h2bdycmw9xfgak7dr8kbpu.jpg

簡略化した構造とCSSは以下の通り。

<body>
  <div id="content">
    <div id="left_content">
      <div class="box">
        left
      </div>
    </div>
    <div id="right_content">
      <div class="box">
        right-1
      </div>
      <div class="box">
        right-2
      </div>
      <div class="box">
        right-3
      </div>
    </div>
  </div>
</body>
#content {
  position: relative;
  width: 1020px;
  margin: auto auto;
  padding: 20px 0 0;
}
#left_content .box {
  float: left;
  width: 750px;
  border: 1px solid #C5D5DD;
  padding: 10px;
}
#right_content .box {
  float: right;
  width: 200px;
  border: 1px solid #C5D5DD;
  margin-bottom: 20px;
  padding: 10px;
}

強引に解決するなら左カラムのmin-heightを定義すればよいとは思うのだが、
右カラムに含まれるボックスの高さはある程度動的に変わる可能性があるため、CSSで解決できる問題であればそうしたい。

hash
機能が向上し, 問題が修正されています
http://twitter.com/T_Hash
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away