Container shows with unwanted vertical scroll bar

This container on my web page has an unwanted vertical scroll bar. Can you help me get rid of it?

<div class="top23">
<a href="../page.php?page=1"><img src="../images/1Page.png" alt="" /></a>
<br />
<font> Text TEXT text TEXT Text TEXT text TEXT Text TEXT text TEXT Text TEXT text TEXT Text TEXT text TEXT Text TEXT text TEXT</font>
<a href="../page.php?page=2"><img src="../images/2Page.png" alt="" /></a>
</div>

Here’s the corresponding CSS:


.top23
{
float: right;
width: 675px;
height: 750px;
font-size:1em;
margin: 10px 15px 30px 20px;
padding: 20px;
border: 1px solid #e5e5e5;
background: #;
overflow: visible;
}

I’ve tried overflow: visible;
overflow: auto;
overflow: hidden;
overflow: auto;
and no overflow:;

Any remedy would be appreciated

Hi,

Where is the scrollbar you are seeing? Is it on the element you mention or on the viewport?

The code above does not generate a scrollbar on itself but will generate one on the viewport if the viewport is less that 10px + 20px + 750px + 20px + 30px + body margins tall (i.e. element margin + padding + height + padding + margin + default body margins/padding).

On viewports taller than 850px (approx) there will be no vertical scrollbar.

Setting height on fluid elements should be avoided and it is unlikely that the 750px height you set on .top23 (what a bad name) is going to be of use to you unless it is just holding a fixed height element like an image (and even then you don’t need a height as the content will dictate the height.)

If the above is not the issue we will need to see the site in question or at least more related css and html.

Hi,

Thanks for your reply. much appreciated.
I’m sorry I don’t know the answer to “Is it on the element…or on the viewport?”
Maybe you can explain the difference, please.
But, in the meantime I did try no overflow and no height in the css, but the container looks the same.
Any additional help will be greatly appreciated.

Hi,

You will have to clarify where the scrollbar is and what you are expecting to happen?

If the scrollbar is on the viewport (the right edge of your browser) then it is simply because .top23 is too tall to fit inside the viewport without forcing a scrollbar due the height on .top23.

If the scrollbar is actually attached to the element itself (on the right edge of .top23) then that is another issue which cannot be resolved from the code you have shown above because you have not set the overflow to anything other than visible.

I guess you may need to clarify what you are expecting to happen?

If you simply want to hide the vertical scrollbar on the viewport then that can be done easily but is not recommended. The code you posted doesn’t show any problems apart from the fact that you have set a 750px height which is a strange thing to do unless you have good reason.

If none of the above makes sense you will need to either provide a link to the site, or at least a working copy of the problem or perhaps show a screenshot showing the problem so we can at least see what you mean.

See this thread for tips on how best to state your case.

Thanks again for the reply. Very helpful.

The scrollbar is on the right side of the element top23.
I’d like the element to expand vertically to show all the text it holds, but the element(container) is only showing the first few lines of text, and to see the rest of the text you must scroll.
I don’t want the scroll bar. I want the entire element to show.
Any additional help will be appreciated.

Hi,

If the scrollbar is on .top23 then simply remove the height:750px from .top23 and then the element will grow with content as expected. Unless of course you have a parent wrapper that also has a height set and overflow other than visible.

If you need a minimum height for your element then use min-height instead of height and that will allow the element to grow should the need arise.


.top23{
height:auto;
min-height:750px;
}

Of course this all depends on what else is going on in your page so you may need to provide a fuller example if the above doesn’t help :slight_smile: