Databases
StackOverflow2013
Postsdbo
POScrollbar on top of div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScrollbar on top of div
    text
    copied!<p>I have a css issue when I try to display a scrollbar. I would like the width to adapt when the is a need for scrollbar. Right now, if there is no scroll bar because content is not long enough, there is a white space which is ugly.</p> <p>This jsFiddle will give a better idea of what I'm trying to describe:</p> <p><a href="http://jsfiddle.net/XGV2t/2/" rel="nofollow">http://jsfiddle.net/XGV2t/2/</a></p> <pre><code>&lt;div id="wiselinks_content" class="containers message_content" style="max-height: 500px;"&gt; &lt;div style="padding:20px; float:left;"&gt; &lt;div style="float:left; width: 100%; margin-bottom:10px" class="message_box message_box_18"&gt; &lt;div style="float:left; height: 40px; width: 40px; margin-right: 6px"&gt; &lt;a href="/thibault"&gt;&lt;img alt="Profile_304577200_75sq_1373018073" height="40" src="http://images.ak.instagram.com/profiles/profile_304577200_75sq_1373018073.jpg" style="display:block;" width="40"&gt; &lt;/a&gt; &lt;/div&gt; &lt;div style="float:left;width: 88%;"&gt; &lt;b&gt; &lt;a href="/thibault"&gt;Thibault B&lt;/a&gt; &lt;/b&gt;&lt;span style="color:#999; font-size: 11px"&gt; about 1 month ago&lt;/span&gt;&lt;br&gt;hello &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="float:left; width: 100%; margin-bottom:10px" class="message_box message_box_19"&gt; &lt;div style="float:left; height: 40px; width: 40px; margin-right: 6px"&gt; &lt;a href="#"&gt;&lt;img alt="Profile_304577200_75sq_1373018073" height="40" src="http://images.ak.instagram.com/profiles/profile_304577200_75sq_1373018073.jpg" style="display:block;" width="40"&gt; &lt;/a&gt; &lt;/div&gt; &lt;div style="float:left;width: 88%;"&gt; &lt;b&gt; &lt;a href="#"&gt;Thibault B&lt;/a&gt; &lt;/b&gt;&lt;span style="color:#999; font-size: 11px"&gt;about 1 month ago&lt;/span&gt;&lt;br&gt;how are you &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="float:left; width: 100%; margin-bottom:10px" class="message_box message_box_28"&gt; &lt;div style="float:left; height: 40px; width: 40px; margin-right: 6px"&gt; &lt;a href="#"&gt;&lt;img alt="Picture?type=large" height="40" src="http://graph.facebook.com/100001498571059/picture?type=large" style="display:block;" width="40"&gt; &lt;/a&gt; &lt;/div&gt; &lt;div style="float:left;width: 88%;"&gt; &lt;b&gt; &lt;a href="/marunbai"&gt;Runbai M&lt;/a&gt; &lt;/b&gt;&lt;span style="color:#999; font-size: 11px"&gt;28 days ago&lt;/span&gt;&lt;br&gt;look at this&lt;br&gt;&lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="create_message"&gt; &lt;form accept-charset="UTF-8" action="/messages/create" class="simple_form new_message" enctype="multipart/form-data" id="new_message" method="post"&gt; &lt;div style="margin:0;padding:0;display:inline"&gt; &lt;input name="utf8" type="hidden" value="✓"&gt; &lt;input name="authenticity_token" type="hidden" value="k32vPIjud4khEnj6U3Bxcx1bVXrRcDpS8dO9S/8K1Uw="&gt; &lt;/div&gt; &lt;input id="message_recipient_id" name="message[recipient_id]" type="hidden" value="12"&gt; &lt;input id="message_type" name="message[type]" type="hidden" value="reply"&gt; &lt;input id="message_sender_id" name="message[sender_id]" type="hidden" value="1"&gt; &lt;textarea cols="40" id="message_body" name="message[body]" rows="20"&gt;&lt;/textarea&gt; &lt;input id="message_subject" name="message[subject]" type="hidden" value=""&gt; &lt;output id="pic_preview"&gt;&lt;/output&gt; &lt;div class="options"&gt; &lt;label class="filebutton"&gt; &lt;img src="/assets/photo_logo.png" height="20px" width="20px"&gt; &lt;span&gt; &lt;input id="picture_for_message" name="message[picture]" type="file"&gt; &lt;/span&gt; &lt;/label&gt; &lt;input class="button create_message_button" name="commit" type="submit" value="Send"&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>Thanks in advance</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload