CSS - How To Remove Scroll Bars On Scrollable Div

I have a few questions, and hopefully this will set me for the rest of the day, so I don't have to bother you guys, at least untill tomorrow afternoon.

1. I have a question about scroll-bars, how are they implemented to be translucient?

2. How can I make <DIV>'s auto-stretch to whatever is in them?

3. How can I get it so that the text doesnt go to the very edge of the <DIV> so that it doesn't touch the border, (and look like crap)?

4. Is there any way to take an XML RSS feed and input it directly into any web page (just though I'd throw that one in there so I didn't have to start another thread).

Thanks,
-Sam

I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that?

Hey everyone,

I am having a really hard time creating a layout using divs with a sticky footer that is able to resize correctly. In the past I often used tables for my layouts (i know, naughty me) so i was mainly relying on some tutorials to get as far as I have. In general everything looks good at a high enough resolution, however once things are resized the footer starts to act weird, and the page can end up with up to 3 vertical scroll bars. As well the divs start to overlap each other.

If anyone has any ideas as to something i can try it would be greatly appreciated.

the page is www.spacehindu.com/archive.php


and the css for the page is as follows:
Code:

* {
	margin: 0;
}
html, body {
	height: 100%;
	padding:0;
	background-color:#000;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;   
	font-size: 13px;
	padding: 0;           
	margin: 0; 
	letter-spacing: 0.5px;

	}

.wrapper{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width:100%;
	margin: 0 auto -30px; 
	}						
			
			

h1{
font-family: calibri, arial, helvetica;
font-size: 22px; letterspacing: 0.5px;
color: #fff;
text-transform: lowercase; 
display: inline; 
padding-bottom: 10px;
}
h2{
display: inline;
font-family: calibri, arial, helvetica;
font-size: 15px; 
letterspacing: 5px;
color: #758a95;
font-weight: lighter; 
}
h3{
display: inline;
text-transform: lowercase; 
font-size: 17px; letterspacing: 1px;
color: #fff;
}
h4{
display: inline;
text-transform: lowercase; 
font-size: 13px; letterspacing: 8px;
color: #758a95;
}

a:link, a:visited {
			font-family: arial, calibri, helvetica;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #374254;
color: #fff; 
text-decoration: none;
}

p {
letter-spacing: 0.5px;
font: Arial, Helvetica, sans-serif #b6bec6;
}

.nav{
	width:400px;
	height:95%;
	float:left;
	background-color:#000;
	min-height:600px;
}
.navImg{
	position:relative;
	top:30%;
}
.content{
	margin-left:400px;
	height:95%;
	background-color:#000;


}
	.archive{
	position:relative;
	left:50px;
	top:10%;

			}

.footer, .push {
	height: 30px;
	background: #12151f; 
	font-family: calibri, arial; 
	font-size: 12px; 
	color: #8f97a4;
	text-align: center;
	clear: both;
}

#dropdown{
background-color:#374254;
color:#CEDBEA;
border: 0px solid;
}
#dropdown .selected {
background-color: #CEDBEA;
color: #000;
border: #000 1px solid;
}

#dropdown .unselected {
background-color: #000;
color: #374254;
}

.fieldset {background-color:#000;
			border: solid 0;
}
.label{font-family: calibri, arial; font-size: 12px; 
letter-spacing: 0.5px;
}
.textarea {
	background: #374254; 
margin: 5px;
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
width: 200px;
}
.message {background: #374254; 
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
border-radius:  10px;

}
.submit {background: #374254;
border: solid 0; 
color: #cedbea;
}

and if it is any help, this is the tutorial i used as my base layout for the divs http://ryanfait.com/resources/footer-stick-to-bottom-of-page/


*EDIT* So i was able to fix the multiple scrollbars by removing "overflow:auto" from a few of the divs. My content div still seems to overlap the footer though. This is especially noticeable if you do a search for "a". a whole bunch of results will appear and the footer will get lost beneath is. Does anyone have any ideas as to how to easily fix this?

I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars.

Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top

Thanks

I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

Hello all,

I'm designing an element on the page that will be masked (i.e., overflow:hidden). I want it to scroll vertically (if done with the scroll wheel or trackpad) but not display a scrollbar.

Any ideas? Any help at all would be greatly appreciated.

Thanks so much

I am trying to work out if its possible to have a div with overflow-x but have the height to whatever the height of the content is. Obviously the content won't have a fixed height for me to just set it.

At the moment ive just got:

<div style="display:block; overflow-x:auto;">
Lots of content here
</div>

Is this possible?

Thanks

I need two scrollable div inside a table. Please help.

Details:

The div contains a table that should force it to show the scrollbars. This table inside the div has specific width(1180px). The div on the other hand should have its width set to 100%. As to why i'm using a table for the layout, i'm using a masterpage that uses table.

Attempt #1

i set the div width to 1180px. This showed the scrollbar. But i don't want the users to be stuck to this if they have bigger resolution.

Attempt #2

i added

position: absolute; --> there are scrollbars but the 2 divs are overlapping

HTML:
Code:

<html>
<head>

<style>

.container
{
	border: 2px solid red;
	overflow: scroll;
	width: 100%;	
	position: absolute;
}

</style>

</head>
<body>

<table width=100%>
<tr>
<td>


<div class=container>
<table border style="width: 1800px;">
<tr>
	<tr>
	<td width=200> January </td>
	<td width=200> February </td>
	<td width=200> March </td>
	<td width=200> Apr </td>
	<td width=200> May </td>
	<td width=200> January </td>
	<td width=200> February </td>
	<td width=200> March </td>
	<td width=200> Apr </td>
	<td width=200> May </td>
	<td width=200> January </td>
	<td width=200> February </td>
	<td width=200> March </td>
	<td width=200> Apr </td>
	<td width=200> May </td>
	</tr>
</table>
</div>

<div class=container>
<table border style="width: 1800px;">
<tr>
	<tr>
	<td width=200> aaaa</td>
	<td width=200> bbbb </td>
	<td width=200> cccc</td>
	<td width=200> ddd</td>
	<td width=200> eee</td>
	<td width=200> fff</td>
	<td width=200> ggg</td>
	<td width=200> hhh</td>
	<td width=200> iii</td>
	<td width=200> jjj</td>
	<td width=200> kkk</td>
	<td width=200> lll</td>
	<td width=200> mmm</td>
	<td width=200> nn</td>
	<td width=200> ppp</td>
	</tr>
</table>

</div>



</td>
</tr></table>

</body>
</html>

I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page:

http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php

The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up.

Here's the basics of the code:

Code:

<div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
	MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
		"See how this and other programs work at" & _
		vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>

Here's the style sheet:

Code:

.code {
	text-align: center;
	margin: 15px;
}

.codeblock {
	text-align: left;
	background: #fff;
	border: 1px;
	border-style: inset;
	width: 99%;
	height: auto;
	overflow: auto;
}

Any help would be appreciated. Thanks.

So, here is the basic gist of what I'm attempting to achieve... Two main fixed-width columns: the one on the left containing my latest blog entry and the one on the right containing a menu of thumbnails. I want the menu column on the right to stop at the height of the left column and use a vertical scroll bar when the thumbnail content is too large to fit. I don't want to use a fixed height for the div containing the thumbnail menu because I want its height to reflect the height of the blog entry on the left.

I started out with this tutorial but I don't think it's necessary for my purposes, or even necessarily a good starting point for this type of functionality.

TLDR: It currently looks like this, and I want it to look like this.

Any ideas?

My ultimate goal: I have some content contained in a scrolling div (overflow:auto). If I hover over one of the links contained within this scrolling div, I would like to get a Netflix-style popup to come up. I want it to overlap over top of the scrolling div. My current attempts have resulted only in the popup content opening within the scrolling div, and making the scrollable region larger. This is not very good as if the user attempts to scroll too see the content they are no longer hovering over the link and the content disappears. Thus, I want the popup to happen outside of the confines of the scrolling div.

My test: I have created a test to get down to the basics. In example 1, the blue div overlaps the green one. The green div remains 400px but the blue div overlaps it extends beyond it to 800px. In example 2, I add overflow:auto to the outer (green) div. In this scenario, the outer green div gets enlarged to 800px, only 400 of which is visible, and the rest hidden in the scrollable area. The inner blue div does not overlap the scrollable region so that the full 800px is visible. What I would like to see is for the green div to stay at 400px but have the blue div cover up the scroll bar and overlap the confines of the scrollable region.

Is this at all possible? Any help is appreciated. I don't necessarily have to use divs.. anything I can use to get the job done would be great.

Example 1:
<html><body>
<div style="background:green;height:200px;width:400px;z-index:0;position:absolute;">
<div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div>
</div>
</body></html>

Example 2:
<html><body>
<div style="background:green;height:200px;width:400px;z-index:0;position:absolute;overflow:auto;">
<div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div>
</div>
</body></html>

Happy new year everybody, and hopefully with more peace then last year.

I need some help with this.

How can I set a block element, like a div, locked inside an area which have scrollbars? When the content scrolls horizontally the block should not move.

I did try many things now for a few days, but I can't get it to work.

Thanks

*edit*

I've been wanting to solve a table problem I've had for a long time. I want a scrollable table without needing to specify specific px widths for the headers and the table cells. I've been told there is no solution to this.

What I've done is duplicate the table. I create a div, give absolute positioning to both tables, show the headers of table1 then use visibility:hidden height:0.01em on subsequent rows. I position the duplicate table - table2 1.8em (1 row) below table1. (I think something could be done with z-index too, and if someone wants to demonstrate I'd be happy to see it). This table has the same data, but skips the headers. Some work is also done to make room for the scrollbar.


Here's a sample:
http://restoredirect.com/test.html

You'll notice I'm close, but just a little off. Can someone help me to get it right?

While not ideal, I think this may help many people.

Also, if someone does have a more ideal approach please speak up and let me know!

Hi.

I'm having a funny problem where using 100% height makes the content div scrollable, even when there's no actual content in it.

I am trying to make my content div be 100% height of the window size, so I have the following css:
Code:

html, body
{
	background: #FFFFFF;
	margin: 0px;
	padding: 0px;
	height: 100%;
	font-family: Trebuchet MS, Helvetica, sans-serif;
}

#wrapper
{
	background: #FFFFFF;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0px auto;
}

#header
{
	background-image: url("images/h-bg.png");
	background-repeat: repeat-x;
	margin: 0px auto;
	padding: 0px;
	width: 960px;
	height: 107px;
}

#header .logo
{
	margin-left: 10px;
}

#header .bg_l
{
	float: left;
}

#header .bg_r
{
	float: right;
}

#nav
{
	background-image: url("images/n-bg.png");
	position: relative;
	margin: 0px;
	width: 100%;
	height: 143px;
	text-align: center;
}

#nav a
{
	float: left;
	outline-style: none;
	width: 240px;
	height: 156px;
}

#nav_btn_wrapper
{
	width: 960px;
	margin: 0px auto;
}

#content
{
	position: relative;
	background-image: url("images/c-bg.png");
	background-repeat: repeat-y;
	width: 930px;
	height: 100%;
	margin: 10px auto 0px auto;
	padding: 10px 15px 0px 15px;
	font-size: 12pt;
}

As you can see I have height: 100% in every parent element from container up.
Without the height set to 100%, the container div just cuts off, which is bad because I'm using a glowy background on it, and it just cuts off abruptly.
I have used this method before on another design, but it worked only cos the wrapper and the container were both white, so when the container chopped off, the wrapper would continue, and it would look seemless.

See www.landmarkmeds.com to see the problem in action.
I have tried to remove the margin on the content div, but that only moved it up a bit.
Also, looking at it in firebug, it reports the height as the correct value, and even shows the ruler down to the bottom of the browser window. Why then it allows me to scroll I don't know!

I'm sure it's something stupid I've missed, but please help!