Centered content with a scroll bar when it reached max width

witnessmenow

Hi Guys,

I'm having an issue trying to achieve a certain functionality.

Basically I am trying to center align some content, 2 different section in the same row, one is a fixed width, the other could be any width.

The one that is any width should have a scroll bar if it goes over the size of the page.

I probably explained this terribly so hopefully screenshots will help!

At the moment the approach I am using is using tables, but I am open to doing whatever works!

This is how it should look when the content doesn't overflow:



And this is how it should look when the content does overflow:



But the problem I have is that the scroll bar doesn't show up unless I set a CSS width on the table, so I gave it one of 100%

But the cards are not center aligned anymore if the content doesn't overflow (as the table is being told to take up 100% width so there is no margins)



And this is how the overflow'd content looks without the width on the table:



Does anyone know how I could achieve the functionality I'm looking for?

Here is the code I have at the moment

it uses bootstrap etc, if you need the the headers or whatever I can provide them.

<div id="judgeVote" class="show">
   <div class="container" style="text-align:center;">
      <form>
         <table style="
            width: 100%;
            table-layout: fixed;
            /* float: center; */
            /* text-align: center; */
            margin: 0px auto;
            ">
            <tbody>
               <tr>
                  <td style="
                     width: 20%;
                     ">
                     <div class="blackCard">
                        <p name="blackCardText">In his newest and most difficult stunt, David Blaine must escape from ____.</p>
                     </div>
                  </td>
                  <td style="max-width:80%;text-align:left;overflow: auto;">
                     <div id="whiteCardContainer" class="whiteCardContainer">
                        <div id="winningWhiteCard317" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput317&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput317" type="radio" name="chosenCard" value="317" onclick="winningWhiteCardPicker(&quot;317&quot;)"></div>
                           <p id="winningWhiteCardPara317">Jerking off into a pool of children's tears.</p>
                        </div>
                        <div id="winningWhiteCard120" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput120&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput120" type="radio" name="chosenCard" value="120" onclick="winningWhiteCardPicker(&quot;120&quot;)"></div>
                           <p id="winningWhiteCardPara120">An icepick lobotomy.</p>
                        </div>
                        <div id="winningWhiteCard317" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput317&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput317" type="radio" name="chosenCard" value="317" onclick="winningWhiteCardPicker(&quot;317&quot;)"></div>
                           <p id="winningWhiteCardPara317">Jerking off into a pool of children's tears.</p>
                        </div>
                        <div id="winningWhiteCard120" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput120&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput120" type="radio" name="chosenCard" value="120" onclick="winningWhiteCardPicker(&quot;120&quot;)"></div>
                           <p id="winningWhiteCardPara120">An icepick lobotomy.</p>
                        </div>
                        <div id="winningWhiteCard317" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput317&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput317" type="radio" name="chosenCard" value="317" onclick="winningWhiteCardPicker(&quot;317&quot;)"></div>
                           <p id="winningWhiteCardPara317">Jerking off into a pool of children's tears.</p>
                        </div>
                        <div id="winningWhiteCard120" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput120&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput120" type="radio" name="chosenCard" value="120" onclick="winningWhiteCardPicker(&quot;120&quot;)"></div>
                           <p id="winningWhiteCardPara120">An icepick lobotomy.</p>
                        </div>
                        <div id="winningWhiteCard317" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput317&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput317" type="radio" name="chosenCard" value="317" onclick="winningWhiteCardPicker(&quot;317&quot;)"></div>
                           <p id="winningWhiteCardPara317">Jerking off into a pool of children's tears.</p>
                        </div>
                        <div id="winningWhiteCard120" name="judgesWhiteCard" class="whiteCard noBorder whiteCardInline" onclick="clicker(&quot;winningWhiteCardInput120&quot;)">
                           <div class="ui-radio"><input id="winningWhiteCardInput120" type="radio" name="chosenCard" value="120" onclick="winningWhiteCardPicker(&quot;120&quot;)"></div>
                           <p id="winningWhiteCardPara120">An icepick lobotomy.</p>
                        </div>
                     </div>
                  </td>
               </tr>
            </tbody>
         </table>
      </form>
      <button type="button" id="judgeChooseButton" class="hide" onclick="javascript:next();">Show All</button>
      <button type="button" id="startButton" class="btn btn-default btn-lg disabled buttonDisable" onclick="javascript:castVote();">
      Vote!
      </button>
      <h3 id="JudgeScreenMessage" class="bg-success">
         Select the card you found the funniest click Vote.
      </h3>
   </div>
</div>

EDIT: I know in the code there is items with overlapping Ids, its just something I was playing around with in chrome to test more cards

Talisman

Why not implement it as a responsive carousel? There are plenty of free jQuery options, for example: Responsive moving box carousel.