The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
#1
08-26-2013, 08:42 PM
|
||||
|
||||
having side by side div issues
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: Quote:
|
|
#2
08-26-2013, 08:51 PM
|
||||
|
||||
|
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.
|
|
#3
08-26-2013, 09:05 PM
|
||||
|
||||
|
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? Quote:
|
|
#4
08-26-2013, 09:06 PM
|
||||
|
||||
|
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
|
|
#6
08-26-2013, 09:30 PM
|
||||
|
||||
|
This would be your basic code:
HTML 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>
|
|
#7
08-26-2013, 09:32 PM
|
|||
|
|||
|
Quote:
|
| Благодарность от: | ||
| cellarius | ||
|
#9
08-27-2013, 06:03 AM
|
||||
|
||||
|
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.
|
|
#10
08-27-2013, 11:45 AM
|
||||
|
||||
|
Try:
Add in additional.css: Code:
#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: Code:
<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.
|
 |
«
Previous Thread
|
Next Thread
»
Linear Mode
|
|
All times are GMT. The time now is 11:45 PM.