I can't seem to get sidebars on both the left and right side of my forums. I have
<div class="forum" style="float: center; width: 72%;">
with a
<div class="side" style="float: right; width: 13%">
and
<div class="side" style="float: left; width: 13%">
(and more stuff below both of those ofcourse)
but all it does is mess up the entire forum
I can put one sidebar on either the left or right of the main forums, just not two at the same time
Any idea what i'm doing wrong?
Try Setting the Left and right to 25% and the center to 50%
There's no center value in float property. Your html should look like this
<div class="float_left sidebar sidebar_left"> <!--Left sidebar content here--> </div>
<div class="float_right sidebar sidebar_right"> <!--Right sidebar content here--> </div>
<div class="forum_container">{$forums} {$boardstats}</div>
<br class="clear" />
css
.forum_container {
margin:0px 190px;
}
.sidebar {
vertical-align:top;
width:180px;
}
(2016-06-01, 06:41 AM)AceRPG Wrote: [ -> ]Try Setting the Left and right to 25% and the center to 50%
wasn't working, however i did figure out one of the problems i was having, forgot to add a </div>
(2016-06-01, 10:18 AM)Johnny S Wrote: [ -> ]There's no center value in float property. Your html should look like this
<div class="float_left sidebar sidebar_left"> <!--Left sidebar content here--> </div>
<div class="float_right sidebar sidebar_right"> <!--Right sidebar content here--> </div>
<div class="forum_container">{$forums} {$boardstats}</div>
<br class="clear" />
css
.forum_container {
margin:0px 190px;
}
.sidebar {
vertical-align:top;
width:180px;
}
So this has mostly worked, however now it's not alligned correctly. One of the sidebars is as large as it needs to be, but the other scrunched down. And the sidebar that is as large as it needs to be is overlapping the forum section. Both sidebars need to have a width of 250. When i set that in CSS the main forum got pushed down below the left sidebar. I reset it back to what you posted and i uploaded a picture of what it looks like
http://ibb.co/dqjfrF
as well, this is what my HTML looks like
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body id="forums">
{$header}
{$serversboard}{$index_forum_search}{$announcement}
<div class="float_right sidebar sidebar_right">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead">
<div class="float_left"><strong>Server Information</strong></div>
</td>
</tr>
<tr>
<td class="trow1">
<iframe src="http://cache.www.gametracker.com/components/html0/?host=74.91.122.52:27015&bgColor=58767E&fontColor=000000&titleBgColor=314347&titleColor=FFFFFF&borderColor=000000&linkColor=000000&borderLinkColor=58767E&showMap=0¤tPlayersHeight=50&showCurrPlayers=1&topPlayersHeight=130&showTopPlayers=1&showBlogs=0&width=250" frameborder="0" scrolling="no" width="250" height="420"></iframe>
</td>
</tr>
</table>
<br />
<script type="text/javascript">
jQuery(function(){
jQuery(".latestthreads").load("{$mybb->settings['bburl']}/portal.php .latestthreads_portal");
});
</script>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead">
<div class="float_left"><strong>Latest activity</strong></div>
</td>
</tr>
<tr>
<td class="trow1">
<div class="latestthreads float_left"></div>
</td>
</tr>
</table>
<br />
</div>
<div class="float_left sidebar sidebar_left">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead">
<div class="float_left"><strong>Discord Information</strong></div>
</td>
</tr>
<tr>
<td class="trow1">
<iframe src="https://discordapp.com/widget?id=187075243532091392&theme=dark" width="250" height="500" allowtransparency="true" frameborder="0"></iframe>
</td>
</tr>
</table>
<br />
</div>
<div class="forum_container">{$forums} {$boardstats}
</div>
<br class="clear" />
{$footer}
</body>
</html>
If you need to change sidebar width try this:
.forum_container {
margin-left:205px; /*Width of left sidebar (value below) + 5px gap
margin-right:245px ; /*Width of right sidebar (value below) + 5px gap
}
.sidebar {
vertical-align:top;
}
.sidebar_left {
width:200px;
}
.sidebar_right{
width:240px;
}
Change the values per your need.
thanks! That worked great!