[TheLastSuperman]

Try:

Add in additional.css:

#customwrapper {
width: 100%;
height: 255px;
margin-right: auto;
margin-left: auto;
}
#wrapleft {
width: 300px;
height: 250px;
float: left;
}
#wrapright {
width: 300px;
height: 250px;
float: right;
}

Add in the actual template:

<div id="customwrapper">
<div id="wrapleft">verse code</div>
<div id="wrapright">shoutbox code</div>
</div>

Advice:
- Make sure the area is over 600px wide, otherwise if shorter in width they will stack therefor you only adjust width and height values of wrapleft and wrapright accordingly.
- ONLY change the height of customwrapper DO NOT change the width as it's a "wrapper" per say.
- Adding in any form of padding code i.e. padding:5px or similar may result in size changes.
- I usually have any type of wrapper (.customwrapper) just a tad bit larger, you can change the height and might be able to remove it entirely though, test this.