MyBB Community Forums

Here's what I have:



I'd like to make the border-right fit all the way to the top and bottom of the postbit so it looks more clean.

Then, I'd like to enable it to slide alongside long posts like here: https://lewd.sx/t/random-thoughts-thread?page=86

Anyone mind helping me with this, I'm clueless.

Here's whats in my postbit_classic template:

{$ignore_bit}{$deleted_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
	
<div class="post_author scaleimages">
	<center style="
    margin-bottom: 6px;
"><strong><span class="largetext">{$post['profilelink']}</span></strong><br />
		{$post['usertitle']}<br />
	{$post['userstars']}</center>
	{$post['useravatar']}
	<div class="author_information">
			<span class="smalltext">
				{$post['groupimage']}
				{$post['onlinestatus']}
			</span>
	</div>
	<div class="author_statistics">
		{$post['user_details']}
	</div>
</div>
<div class="post_content">
	<div class="post_head">
		{$post['posturl']}
		{$post['icon']}
		<span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
	{$post['subject_extra']}
	</div>
	<div class="post_body scaleimages" id="pid_{$post['pid']}">
		{$post['message']}
	</div>
	{$post['attachments']}
	{$post['signature']}
	<div class="post_meta" id="post_meta_{$post['pid']}">
		{$post['iplogged']}
	</div>
</div>
<div class="post_controls">
	<div class="postbit_buttons author_buttons float_left">
		{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
	</div>
	<div class="postbit_buttons post_management_buttons float_right">
		{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
	</div>
</div>
</div>
<br>

Easiest way to achieve that is simply using old style 'table' or advance to 'flexbox'.
Not providing the ready made code as its easy to figure out with this information.

There are lot of ways you can achieve this but if you are not bothered about compatibility with older browsers than css-grid and flexbox are the easiest. And as effone said, you can also use display style as table. Jquery is also a solution for this issue and as MyBB uses jquery by default, it makes it easier to use. Anyways I am using css-grid in this case and you can use any other way as suggested above

.classic {
    padding: 1rem;
    font-size: 1.4rem;
    display: grid;
    grid-template-columns: 1fr 7fr;
}
.post_author {
    text-align: center;
    position: relative;
}

That's it, it should stretch the author width to the content width and stick it to the end of post.
I have used css-grid for this case, you can even use flexbox and table.

For sticking the content on left, you need to remember using relative as position element.

Note: I have not tested it, this is rough code so you will need to modify it.

(2018-03-11, 07:11 AM)WallBB Wrote: [ -> ]There are lot of ways you can achieve this but if you are not bothered about compatibility with older browsers than css-grid and flexbox are the easiest. And as effone said, you can also use display style as table. Jquery is also a solution for this issue and as MyBB uses jquery by default, it makes it easier to use. Anyways I am using css-grid in this case and you can use any other way as suggested above

.classic {
    padding: 1rem;
    font-size: 1.4rem;
    display: grid;
    grid-template-columns: 1fr 7fr;
}
.post_author {
    text-align: center;
    position: relative;
}

That's it, it should stretch the author width to the content width and stick it to the end of post.
I have used css-grid for this case, you can even use flexbox and table.

For sticking the content on left, you need to remember using relative as position element.

Note: I have not tested it, this is rough code so you will need to modify it.

still having trouble, never used grid before. Any easier method for a noob like me?