• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS to stop block wrapping

Neil E.

Active member
#1
I'm back to looking for a different way to display the sidebar information. I can place it at the bottom of the forum list OK, but I need to stop it from wrapping when the browser window is resized. I want any overflow to just disappear from view, not push down to another line. I've looked at every web tutorial I could find, but haven't figured out how to achieve this, and it's driving me crazy. I have to believe that someone here knows how to help fix this.

Window normal:

xenforo43.jpg


Window resized:

xenforo45.jpg

Code:
<xen:require css="forum_stats.css" />
 
<div class="borderwrapper">
    <div class="borderwrapperLeft">
        <div class="stats_block">
                <h2 class="stats_title_left">{xen:phrase forum_statistics}</h2>
                <div class="pairsJustified" id="stats_content">
                <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                    <dd>{xen:number $boardTotals.discussions}</dd></dl>
                <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                    <dd>{xen:number $boardTotals.messages}</dd></dl>
                <dl class="memberCount"><dt>{xen:phrase members}:</dt>
                    <dd>{xen:number $boardTotals.users}</dd></dl>
                <dl><dt>{xen:phrase latest_member}:</dt>
                    <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
                </div>
        </div>
    </div>
 
 
 
    <div class="borderwrapperCenter">       
        <div class="stats_body">
        <h3 class="stats_title_center"><a href="{xen:link online}" class="Tooltip" title="{xen:phrase see_all_online_users}">{xen:phrase members_online_now}</a>{xen:phrase online_now_x_members_y_guests_z, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}'}</h3>
            <div id="stats_content">
                <xen:if is="{$onlineUsers.records}">
                    <xen:if is="{$visitor.user_id}">
                        <xen:if hascontent="true">
                        <h4 class="minorHeading"><a href="{xen:link account/following}">{xen:phrase people_you_follow}:</a></h4>
                            <ul class="followedOnline">
                            <xen:contentcheck>
                                <xen:foreach loop="$onlineUsers.records" value="$user">
                                    <xen:if is="{$user.followed}">
                                        <li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
                                    </xen:if>
                                </xen:foreach>
                            </xen:contentcheck>
                            </ul>
                        <h4 class="minorHeading"><a href="{xen:link members}">{xen:phrase members}:</a></h4>
                        </xen:if>
                    </xen:if>
                <ol class="listInline">
                <xen:foreach loop="$onlineUsers.records" value="$user" i="$i">
                    <xen:if is="{$i} <= {$onlineUsers.limit}">
                        <li>
                            <xen:if is="{$user.user_id}">
                                <a href="{xen:link members, $user}"
                                            class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                            <xen:else />
                                        {xen:phrase guest}<xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                            </xen:if>
                        </li>
                    </xen:if>
                </xen:foreach>
                <xen:if is="{$onlineUsers.recordsUnseen}">
                    <li class="moreLink">... <a href="{xen:link online}" title="{xen:phrase see_all_visitors}">{xen:phrase and_x_more, 'count={xen:number $onlineUsers.recordsUnseen}'}</a></li>
                </xen:if>
                </ol>
                </xen:if>
            </div>
        </div>
    </div>
 
 
    <div class="borderwrapperRight">
        <div class=share_block>
            <h3 class="stats_title_right">{xen:phrase share_this_page}</h3>
                <div class="shareContent">
                        <xen:hook name="sidebar_share_page_options">
                        <xen:if is="{$xenOptions.tweet.enabled}">
                            <div class="tweet shareControl">
                                <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"
                                    data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
                                    data-url="{$url}"
                                    {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                                    {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                            </div>
                        </xen:if>   
                        <xen:if is="{$xenOptions.facebookLike}">
                            <div class="facebookLike shareControl">
                                <xen:container var="$facebookSdk">1</xen:container>
                                <fb:like href="{$url}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                            </div>
                        </xen:if>
                        <xen:if is="{$xenOptions.plusone}">
                            <div class="plusone shareControl">
                                <div class="g-plusone" data-size="medium" data-count="true" data-href="{$url}"></div>
                            </div>
                        </xen:if>
                        </xen:hook>   
                </div>
        </div>
    </div>
</div>
Code:
.borderwrapper {
    margin: 0px;
    width: 100%;
    overflow: hidden;
}
 
.borderwrapperLeft {
    margin-left: 5px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 18%;
    float: left;
}
 
.borderwrapperCenter {
    margin: 10px;
    width: 66%;
    float: left;
}
 
.borderwrapperRight {
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    width: 11%;
    float: right;
}
 
.stats_block {
    background: none;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    width: 100%;
    height: 96px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
}
 
.stats_body {
    background: none;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    width: 100%;
    height: 96px;
    float: left;
    overflow-y: auto;
}
 
.share_block {
    background: none;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    width: 100%;
    height: 96px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
}
 
.shareContent {
    padding-left: 10px;
    padding-top: 6px;
}
 
.stats_title_left, .stats_title_right {
      margin: 0px;
    background: none;
      border-bottom: 1px solid #E0E0E0;
      color: @dimmedTextColor;
      text-align: center;
    font-size: 11px;
    padding: 3px 10px;
    white-space: nowrap;
}
 
.stats_title_center {
      margin: 0px;
    background: none;
      border-bottom: 1px solid #E0E0E0;
      color: @dimmedTextColor;
      text-align: left;
    font-size: 11px;
      padding: 3px 10px;
    white-space: nowrap;
}
 
 
#stats_content { font-size: 11px; padding: 5px 10px; }
 

Neil E.

Active member
#3
It would be nice to know why horizontal elements are such a PITA. When CSS properties were originally conceived, adding "float: center" or "float: even" would have simplified things a lot.

Jake's answer works fine. I reduced the center block width and then increased it's left margin to center it back up. Not quite as attractive but workable.
I reduced the width further to 56% to improve the look on low resolution monitors.

xenforo46.jpg