2つのdivを並べて配置（整列）

Question

私は誰かのためにウェブサイトを作っています。次のステップでは、divを並べて整列させる必要があります。私はすでにフレックスを試していたし、それは私のために働かなかった。

これは私のhtmlです：ここでは

<!-- starting charts1 --> 
    <div id="wrapper" style="width:100%"> 
    <div id="columnchart"></div> 
    <div id="columnchart2"></div> 
    <div id="columnchart3"></div> 
    <div id="piechart"></div> 
    <div id="barchart"></div> 
    </div> 
    <!-- ending charts1 --> 

あなたは私は奇妙なことをスクロールすると80％に私のバックグラウンドは、従わないことに変更したときに、私は幅100 &を試したことがわかります。 CSSの一部を今すぐ

は：

/* BEGIN VOOR CHARTS */ 
#wrapper { 
position: relative; 
float: left; 
} 
#columnchart { 
width: 515px; 
position: relative; 
margin: auto; 
    left:0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 
#columnchart2 { 
position: relative; 
width: 515px; 
margin: auto; 
    left:0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 
#columnchart3 { 
position: relative; 
width: 515px; 
margin: auto; 
    left:0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 
#piechart { 
position: sticky; 
width: 515px; 
margin: auto; 
    left:0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 

#barchart { 
position: sticky; 
width: 515px; 
margin: auto; 
    left:50%; 
    right: 0; 
    top: 0; 
    bottom: 50%; 
} 
/* END VOOR CHARTS */ 

彼らはすでに大きなthatsのよう、それは私が望んでいたし、どのような作品である中央に配置されます。だから私はそれらのdivsを中心に持っています：

<div id="columnchart"></div> 
<div id="columnchart2"></div> 
<div id="columnchart3"></div> 
<div id="piechart"></div> 

これらのdivは、これは素晴らしい作品です。しかし、今、私はまた、このいずれかを中心にしたいが、上記のdivの隣：

<div id="barchart"></div> 

私は私が近いよ知っているが、それは動作しません。私はすでに同じタイトルの他の質問を読んだが、動かなかった。

Answer 1

これを削除 'left：50％;'

#barchart { 
position: sticky; 
width: 515px; 
margin: auto; 
    left:50%; 
    right: 0; 
    top: 0; 
    bottom: 50%; 
} 

Answer 2

ラップこのような二つの容器内の内容は：

<div class="cont"> 
    <div id="columnchart"></div> 
    <div id="columnchart2"></div> 
    <div id="columnchart3"></div> 
    <div id="piechart"></div> 
</div> 
<div class="cont"> 
    <div id="barchart"></div> 
</div> 

は、その後、次のCSSを追加します。

#wrapper { 
    position: relative; 
    float: left; 
    text-align: center; /* Use this to align center */ 
} 
.cont { 
    display: inline-block; 
    vertical-align: top; 
    width: 515px; 
} 

これは、2つのセクションを中央にして、他のほかに、それらを1つずつ配置する必要があります。