Question

I am trying to have #subwrapper and #submission_message appear side by side, and use #vert_center as a sort of “track” that hold them together, vertically centered on the page. However, #submission_message continues to load directly under #subwrapper, as if it was clearing left or something. Help?

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;
}

Basic HTML:

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

Answer 1

div#submission_message should appear under div#subwrapper – they’re both block elements and this is how block elements flow inside their container (their container being div#vert_center). If you want them next to each other, then float them inside their container