이 요소가 형제와 함께 표시되지 않는 이유는 무엇입니까?

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 # subwrapper 아래에 div # subwrapper 아래에 submission_message가 있어야합니다.이 두 요소는 모두 블럭 요소이며, 블럭 요소가 컨테이너 내부에서 어떻게 흐르고 있는지 (div # vert_center 인 컨테이너입니다). 서로 옆에 놓기를 원한다면 컨테이너 안에 넣으십시오.

Answer 2

I made a Fiddle for my soltuion, 기본적으로 #subwrapper 및 #submission_message에 float: left 추가 금액.