なぜこの要素は兄弟の横に表示されませんか？

Question

私は#subwrapperと#submission_messageを並べて表示しようとしています。#vert_centerは、それらをまとめて、ページの中央に縦に並べる「トラック」の一種として使用します。ただし、#submission_messageは#subwrapperの下にそのまま残っているかのようにそのままロードされ続けます。助けて？

CSS：

#floater{ 
    position:relative; 
    float: left; 
    height:50%; 
    margin-bottom: -155.5px; 
    width:1px; 
} 

#vert_center{ 
    position: relative; 
    clear: left; 
    width:100%; 
    height:315px; 
} 

#subwrapper{ 
    display:block; 
    background-color:#FFFFFF; 
    position:relative; 
    width:600px; 
    height:315px; 
    margin: 0 auto; 

#submission_message { 
    position:relative; 
    width:600px; 
    height:315px; 
    margin: 0 auto; 
} 

基本HTML：

<div id=floater></div> 
<div id=vert_center> 
    <div id=subwrapper>BlaBla1</div> 
    <div id=submission_message>BlaBla2</div> 
</div> 

Answer 1

div＃submwrapperの下にdiv＃submwrapperが表示されます。両方ともブロック要素であり、これはブロック要素がコンテナ内でどのように流れるかです（コンテナはdiv＃vert_centerです）。隣に置いておきたい場合は、容器の中に浮かべてください。

Answer 2

I made a Fiddle for my soltuion、基本的に#subwrapperと#submission_messageにfloat: leftを追加することになります。