CSSでHTMLの記述順とは異なる並び順にする

「float」、「position」使う方法

サイドバーを左、メインを右の表示にする(2カラム)

## html ```qiita.html

メイン

サイドバー

```

css

qiita.css

.main {
    float: right;
    width: 70%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar {
    float: left;
    width: 30%;
    height: 300px;
    background: #CCC;
}

サンプル

サイドバーを左右、メインを中央の表示にする(3カラム)

## html ```qiita.html

メイン

サイドバー01

サイドバー02

```

css

qiita.css

.box-left {
    position: relative;
    right: 25%;
}

.box-mid {
    position: relative;
    right: 50%;
}

.main {
    position: relative;
    left: 98%;
    float: left;
    width: 54%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar01 {
    position: relative;
    left: 21%;
    float: left;
    width: 23%;
    height: 300px;
    background: #CCC;
}

.sidebar02 {
    position: relative;
    left: 75%;
    float: left;
    width: 23%;
    height: 300px;
    background: #CCC;
}

サンプル

CSS3の「Flexbox」を使う方法

サイドバーを左、メインを右の表示にする(2カラム)

## html ```qiita.html

メイン

サイドバー

```

css

qiita.css

.container {
    display: flex;
}

.main {
    order: 2;
    width: 70%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar {
    order: 1;
    width: 30%;
    height: 300px;
    background: #CCC;
}

サンプル

サイドバーを左右、メインを中央の表示にする(3カラム)

## html ```qiita.html

メイン

サイドバー01

サイドバー02

```

css

qiita.css

.container {
    display: flex;
}

.main {
    order: 2;
    width: 54%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar01 {
    order: 1;
    width: 23%;
    height: 300px;
    background: #CCC;
}

.sidebar02 {
    order: 3;
    width: 23%;
    height: 300px;
    background: #CCC;
}

サンプル