2つのディビジョンを並べて表示

Question

私は2つのディビジョンを並べて表示しようとしていますが、その下のディビジョンは上にスムージングされます。このように見える：

はここに私のHTMLです：

<div class="DSL6"> 
<h3 class="DSLLocation">DSL 6</h3> 
</div> 
<div class="DSLInformation"> 
</div> 
<div class="FTTN10"> 
<h3 class="FTTNLocation">FTTN 10</h3> 
</div> 
<div class="FTTN15"> 
<h3 class="FTTNLocation">FTTN 15</h3> 
</div> 
<div class="FTTN25"> 
<h3 class="FTTNLocation">FTTN 25</h3> 
</div> 
<div class="FTTN50"> 
<h3 class="FTTNLocation">FTTN 50</h3> 
</div> 

とCSS：

.DSL6 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    margin-top: 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
    float: left; 
    clear; 
} 
.DSLLocation { 
    margin-top: 60px; 
} 
.DSLInformation { 
    width: 850px; 
    height: 150px; 
    background-color: black; 
    float: left; 

} 
.FTTNLocation { 
    margin-top: 60px; 
} 
.FTTN10 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN15 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN25 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 
.FTTN50 { 
    background-color: #dbdbdb; 
    width: 250px; 
    height: 150px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #D3D3D3; 
} 

私の周り見てきた、と私は両方で（別の答えを試してみました他のサイト、およびスタックオーバーフロー）、残念ながら問題は見つかりませんでした。私が欲しいもの

：

Answer 1

すべてのdivのあなたの全体の幅が画面幅よりも大きくなっているため、この結果を得ています。私の変更されたCSSを参照してください、ここですべてのdivはインラインです。もう1つは、divインラインを表示するのにfloat: leftを使うべきです。

.wrapper{ 
 
    width: 500px; 
 
} 
 
.DSL6 { 
 
    background-color: #dbdbdb; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #D3D3D3; 
 
    float: left; 
 
    display: inline; 
 
} 
 
.DSLLocation { 
 
    margin-top: 60px; 
 
} 
 
.DSLInformation { 
 
    width: 300px; 
 
    height: 150px; 
 
    background-color: black; 
 
    float: left; 
 
    display: inline; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: black; 
 

 
} 
 
.FTTNLocation { 
 
    margin-top: 60px; 
 
} 
 
.FTTN10 { 
 
    background-color: #dbdbdb; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    float: left; 
 
    display: inline; 
 
    border-width: 1px; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN15 { 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    float: left; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN25 { 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    float: left; 
 
    border-color: #D3D3D3; 
 
} 
 
.FTTN50 { 
 
    float: left; 
 
    background-color: #dbdbdb; 
 
    width: 50px; 
 
    height: 150px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline; 
 
    border-color: #D3D3D3; 
 
}

<div class="wrapper"> 
 
<div class="DSL6"> 
 
<h3 class="DSLLocation">DSL 6</h3> 
 
</div> 
 
<div class="DSLInformation"> 
 
</div> 
 
<div class="FTTN10"> 
 
<h3 class="FTTNLocation">FTTN 10</h3> 
 
</div> 
 
<div class="DSLInformation"> 
 
</div> 
 
</div>

EDIT概要OPの要件としてhtml編集。