How to add a horizontal scroll bar to the browser window?

ReportingAnalyst · Dec 4, 2006

Hi,

I have 3 divs laid down side by side.

Code:

div1                  div2                    div3

All the Div have the width and height in percentages.

I used to have them in pixels, but when I used to make my window smaller, then the 3rd div used to be pushed down.

After changing the measures to '%' and 'em', when I make the browser window smaller, then the last div(Div3) is not pushed down, but seems to have messed up the formatting of the elements within the divs.

I see some sites where no matter the size of the window, I get to see both the vertical and horizontal scroll bar. So my question is how can I introduce a horizontal scroll bar and maintain the div position as well.

Thanks.

ReportingAnalyst · Dec 4, 2006

I would not like my DIV to be wrapped when I make the windows smaller.

How to prevent this behaviour?

Thanks.

vacunita · Dec 4, 2006

Add a DIV surrounding the 3 DIV's and give it a 100% width, and an overflow:auto. This will give it a scrollbar if it needs one, and maintain the other 3 divs in place.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

ReportingAnalyst · Dec 5, 2006

I am still not able to see my srollbars - horizontal.

Here is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<HTML>
<HEAD>
<style type="text/css">
body
{
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#5a5b5e;
font-size: 12px;
background-color: #DDDDDC;
}
.div_Container
{
overflow: auto;
width:100%;
height: 100%;
}
.div_top
{
width: 88%;
height: 98%;
float: left;
background-color: #FFFFFF;
margin-top: 0em;
}
</style>

<TITLE>View Commissions Reports</TITLE>
</HEAD>

<body>
<!-- This is the top most level which holds all the content divs -->
<div class="div_Container">
<!-- This container should not re-size when I make the window smaller. Instead I should see horizontal scroll bars-->
<div class="div_top">
Smaller divs will come within this div top
</div>
</div>
</body>
</form>
</body>
</html>

Any ideas about this?

Secondly even though I assigned a height of 98% to the div_top div, why don't I see it with 98% height. Instead I see only as wide as the text within the Div.

Thanks.

Vragabond · Dec 5, 2006

Ok, let's slow down and review. You are saying that your div top has a height of 98% but is only as wide as the text? I am sure you meant only as high. Did you ever check how high your container is? The one that is supposedly 100%? Well, here it is, really quickly.

If you do not specify a distinct height to the parent container, the height of the element in percentage always reverts to auto. So, since body is the parent of your div_Container and that does not have a height specified, div_Container is not 100% (because it has no clue as to 100% of what is should be) but reverts to being auto (meaning only as high as the content). The rest of the suit follows. How to deal with that?

Your canvas is your <html> tag. That one has a height of auto. If you change that height to 100%, it will be 100% of the viewport. Then you simply need to make sure your body is 100% of that and your container is 100% of that. And you have full screen. Just don't be too surprised if your page is more than a full screen and your design does not extend. You specifically wanted it to be only 100% of the viewport, not more.

Next, the actual scrollbars. What you're trying to do, won't work. Floated elements will not float beyond the border of the parent and if parent has a width of 100% of the viewport it will simply become smaller with smaller viewport. You need to actually give a pixel size to your container. That way, when the screen is smaller that that amount of pixels, scrollbar will appear. Alternatively you could also specify the width in ems.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to add a horizontal scroll bar to the browser window?

ReportingAnalyst

MIS

ReportingAnalyst

MIS

vacunita

Programmer

ReportingAnalyst

MIS

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor