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

Discussion in 'Styling and Customization Questions' started by Neil E., Aug 2, 2012.

  1. Neil E.

    Neil E. Active Member

    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; }
    
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can make the blocks smaller. Like change your .borderwrapperCenter to width: 60%;
     
  3. Neil E.

    Neil E. Active Member

    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
     

Share This Page