CODEWITHSUNDEEP
csshtml
harir
harir

Reputation: 49

Why isnt my scrollbar aligned all the way to the right? HTML/CSS

I'm having trouble moving a scrollbar all the way to the right. For some reason, my scrollbar is about 4/5 of the way to the right but not all the way to the right and I have no idea why.

This is my HTML Code:

<table class="userQueue">
    <caption>Users Queue</caption>
    <tbody class="userQueue">
        <tr>
            <td class="userQueue">
                <div class="userQueue">
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br>  
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                </div>
            <td>
        </tr>
    </tbody>
</table>

This is my CSS Code:

tbody.userQueue 
{
    background-color: grey;
}

td.userQueue
{
    height: 200px;
}

td.userQueue > div
{
   width: 100%; 
   height: 100%; 
   overflow: auto;
}

This is what shows up on my webpage:

View of my table

I want the scroll bar to be all the way to the right but for some reason it is not...notice how there is a bit of gray between the scroll bar and the very right of its container. Thanks in advance!

Upvotes: 2

Views: 194

Answers (3)

Gabriel
Gabriel

Reputation: 141

You don't have a closing tag for your table td tag

  • your div need not be there you can just assign a static height to the td element, you also don't need to reference the userQueue class in your html more than once

-- it depends what you want to achieve of course 

.userQueue td {width: 100%; height: 200px; overflow: auto;}

<table class="userQueue">
        <caption>Users Queue</caption>
        <tbody>
          <tr>
            <td>
               <div>
                  hello<br>
                  hello<br>
                  hello<br>
                  hello<br>
                </div>
            </td>
          </tr>
       </tbody>
 </table>

Upvotes: 0

Shenole Latimer
Shenole Latimer

Reputation: 326

I believe I have your problem solved and it's relatively simple thank goodness!

First, I will explain the issue. Second, I will provide the code and third I will give you a screenshot of my results. Here goes...

FIRST - There are just 2 things you need to do and they involve your CSS code. The first thing is you need to tell the table element that you want it to take up the width of the screen. The second thing is that you need to tell the both the "td" elements and the "div" elements that they need to take up all the space provided by the "table" element.

So basically, if you tell the table to take 100% the width of the screen and then you tell those other two elements to take up 100% of what the table is taking, you are essentially telling the code that you want everything to take up the full width of the screen.

SECOND - here is the code and you will notice that I have at the very beginning a little snippet of code setting padding and margin to "0". That is to help make it look right on any browser. It is called a browser reset". The one I used in this example is just a basic one I that is referred to as a "soft browser reset". Here is the full code....

HTML

<table class="userQueue">
            <caption>Users Queue</caption>
            <tbody class="userQueue">
                <tr>
                    <td class="userQueue"><div class="userQueue">
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br>  
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    </div><td>
                </tr>
            </tbody>
        </table>

CSS

* {
    padding: 0;
    margin: 0;
}

table.userQueue {
    width: 100%;
}

tbody.userQueue 
{
    background-color: grey;
}

td.userQueue
{
    height: 200px;
    width: 100%;
}

td.userQueue > div
{
   width: 100%; 
   height: 100%; 
   overflow: auto;
}

THIRD - Here is a screen shot of my result... enter image description here

I hope that helps and don't forget to post your results as to if that helped or not. :)

Upvotes: 0

bowheart
bowheart

Reputation: 4676

You have two unclosed <td> tags in your markup. A browser will realize this mistake and close them for you, creating an extra, unwanted <td> tag, which is the extra space you see. I believe you meant the second one to be a closing tag (</td>). Change

Hello</br> 
</div><td>

to

Hello</br> 
</div></td>

and the extra space is gone.

Upvotes: 2

Related Questions