要素を固定divの隣に置く

Question

固定divの隣にdivを配置しようとしていますが、代わりにdivが固定div内に配置されています。 divをfixed divの隣に置くにはどうすればいいですか？私はdivとfloat: rightを使うことができると知っていますが、浮動小数点を使用せずにそれを行う方法は、ただinline-blockでですか？ここにはjsFiddleがあります。

HTML

<div id='column'> 

    </div> 
    <div id='content'> 

    </div> 

CSS

body { 
    height: 100%; 
} 

#column { 
    display: inline-block; 
    position: fixed; 
    width: 20%; 
    min-height: 100%; 
    background-color: red; 
    vertical-align: top; 
    z-index: -1; 
} 

#content { 
    display: inline-block; 
    background-color: black; 
    width: 100px; 
    height: 200px; 
} 

Answer 1

あなたの固定要素が20%広いですので、あなたはそれの右に#contentを移動するためにmargin-left: 20%を使用することができます。

body { 
 
    height: 100%; 
 
} 
 

 
#column { 
 
    display: inline-block; 
 
    position: fixed; 
 
    width: 20%; 
 
    min-height: 100%; 
 
    background-color: red; 
 
    vertical-align: top; 
 
    z-index: -1; 
 
} 
 

 
#content { 
 
    display: inline-block; 
 
    background-color: black; 
 
    width: 100px; 
 
    height: 200px; 
 
    margin-left: 20%; 
 
}

<div id='column'> 
 

 
    </div> 
 
    <div id='content'> 
 

 
    </div>

Answer 2

うん、あなたはのdiv ID contentのCSSにmargin-left: 20%;かmargin-right: -20%を使用することができます。しかし、私はあなたにブートストラップを使うことを提案します。それであなたはそれをとても簡単にすることができます