having side by side div issues

[Chadi]

I'm trying to get the shoutbox on www.talkjesus.com to float left while the verse of the day (orange) to float on the very right side of the shoutbox. I've tried so many variations but it's not working, I'm stuck. Your help appreciated.

The forumhome template code I'm using now is:

<div class="blockbody formcontrols floatcontainer">

<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
<div style="text-align: center; line-height: 0" class="blockrow">
<div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
<div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
</div>
</div>
</div>

<br />

<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
<div>
<div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
<script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&amp;type=js2&amp;tw=auto&amp;tbg=fff fff&amp;bw=0&amp;bc=000000&amp;ta=L&amp;tc=43A6DF&amp;tf=Open Sans&amp;ts=14&amp;ty=B&amp;va=L&amp;vc=43A6DF&amp;vf=Open Sans&amp;vs=12&amp;tt=3&amp;trn=NASB"></script>
</div>
</div>
</div>
</div>

[Lynne]

You need to remove the <br /> between the two blocks. And, in the CSS for the Verse of the Day (which should NOT have an id of wgo_onlineusers because id tags may only be used once per page), you need to not have clear set to both.

Really what you need to do is rewrite those blocks. You've copied the code, including the same id for both of them plus other code on the page, and then put the Verse div first, float it right, and then put the shoutbox div next and float it left.

[Chadi]

Thanks Lynne. Where do you see any clear reference? I do not see any "clear" div code.

So the code now looks like this (not live yet)... what else should I do?


<div class="blockbody formcontrols floatcontainer">

<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
<div style="text-align: center; line-height: 0" class="blockrow">
<div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
<div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
</div>
</div>
</div>

<div class="blockbody formcontrols floatcontainer">
<div class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
<div>
<div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
<script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&amp;type=js2&amp;tw=auto&amp;tbg=fff fff&amp;bw=0&amp;b c=000000&amp;ta=L&amp;tc=43A6DF&amp;tf=Open Sans&amp;ts=14&amp;ty=B&amp;va=L&amp;vc=43A6DF&amp;vf=Open Sans&amp;vs=12&amp;tt=3&amp;trn=NASB"></script>
</div>
</div>
</div>
</div>

[TheLastSuperman]

Also in certain situations when using side by side div you should wrap it in a "parent" div per say plus if you have issues with them aligning vertically specify the height in each set definition and it should be the same height on both sides.

Example: https://vborg.vbsupport.ru/showthread.php?t=228319

[Chadi]

Could someone please show me what the code should look like? This would be easier than me continually guessing.

Thanks

[Lynne]

This would be your basic code:
<div style="width: 100%;">
<div id="verses" style="align: right; width: xxxx;">verse code</div>
<div id="sbox" style="align: left; width: xxxx;">shoutbox code</div>
</div>

And ideally, you wouldn't have any style there, you'd add it to the additional.css template for each div id.

[tbworld]

Could someone please show me what the code should look like? This would be easier than me continually guessing. If your going to customize your board and take on projects like this, you need to spend some time learning some basic html and css or your never going to be able to support your board in the long run. You have like 1900 basic questions... by now you should not be a beginner and you should not be asking the good people here to code for you, for free.

[Chadi]

Lynne

Thanks but that doesn't work. They stack left on top of each other.

[cellarius]

You replaced xxx in Lynne's example with actual values? And the total width of the parent div is large enough? Then it will work.

And, of course, tbworld is absolutely right.

[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.

[Lynne]

Lynne

Thanks but that doesn't work. They stack left on top of each other.
It's impossible to see what is wrong without actually viewing the problem.