Learn VBA & Macros in 1 Week!

CSS - Getting A Div With Vertical Scrolling Enabled To Take 100% Of Remaining Window.

Full Excel VBA Course - Beginner to Expert

Getting A Div With Vertical Scrolling Enabled To Take 100% Of Remaining Window.	View Content

Here is the basic structure i'm working with:

Quote:
<div id="header'> header goes here </div>
<br clear="all">
<div id="leftbar">dynamically generated content from php here</div>
<div id="map"> map here </div>

the styles:

Quote:
#header{
height:42px;
width:100%;
background-image: url(../images/header/header_spacer.jpg);
background-repeat:repeat-x;
text-align:right;
}

div.leftbar{
float:left;
width: 400px;
height:100%;
overflow: scroll;
z-index:1;
}

div.map{
float:left;
}

The Problem: In all browsers the height of the leftbar is : 100% of the entire page as opposed to 100% of the entire page minus the size of the header element. This causes a scroll bar to appear on the page.

Any ideas on how to solve this problem? If I don't define a height of 100% the leftbar div doesn't scroll at all.

A good example of what i'm trying to accomplish here is : maps.google.com . Notice how on that site, the left menu bar scrolls, but is always 100% of the remaining page length (after the search stuff on top).

thanks in advance.

Full Excel VBA Course - Beginner to Expert

Vertical Scrolling To Nowhere...

Similar Tutorials

View Content

Hello all,

I noticed there was similar post on this topic, though I was not able to fix my problem with that post, so I will post my own.

I have made a site with relative pos, and css. I have everything positioned nicely (on everything but IE, still working on that CSS), but I have a vertical scroll bar that goes down about 3 inches, the only thing, there is nothing down there to scroll to. I have tried to alter just about everything I can think of, but nothing seems to work. If you can believe it this has been plagueing me for about 3 weeks now. Any help would relieve a lot of stress. Thanks very much for your time.

bcode.

=========== CSS File============
.wdlogo {
visibility:visible;
position:absolute;
z-index:0;
left:10px;
top:10px;
}

.slidingtext {
visibility:visible;
position:relative;
z-index:2;
left:245px;
top:-200px;
}

.blacklink {
text-decoration: none;
color: #000000; }

.blacklink:hover {
text-decoration: none;
color: #000000;
}

.intro {
text-align: left;
color: #000000;
font-size: 12pt;
font-family: Lithograph, sans-serif;
position: absolute;
visibility: visible;
z-index: 2;
left: 360px;
top: 300px;
}

.center {
visibility: visible;
position: absolute;
z-index: 0;
top: 165px;
left: 85px;
}

.shadowleft {
width:32px;
background-image: url(images/Working/jpg/left_ver_5.jpg);
background-repeat: repeat-y;
background-position: right top;
}

.background {
background-image: url(images/Working/jpg/background.jpg);
background-repeat: repeat;
}

.shadowright {
width: 32px;
background-image: url(images/Working/jpg/right_ver_3.jpg);
background-repeat: repeat-y;
background-position: left top;
}

.top {
position: absolute;
visibility: visible;
top: 0px;
}

.dots {
position: relative;
visibility: visible;
z-index: 2;
left: 160px;
top: -150px;
}

.nav {
position: relative;
visibility: visible;
z-index: 2;
left: 5px;
top: 250px;
}

.bar1 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -460px;
}

.bar2 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -420px;
}

.bar3 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -380px;
}

.welcometext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -455px;
width:330px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}

.whytext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -415px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}

.empowertext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -375px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}

=================================

==========XHTML File===============
<?xml version="1.0" encoding="iso-8859-1" ?>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Web Diligence</title>

<link rel="stylesheet" type="text/css" href="wd.css" />





<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body topmargin="0" bottommargin="0" class="background">
<table cellpadding="0" cellspacing="0" align="center" width="800px">
<td class="shadowleft" height="100%" width="32px" rowspan="20">
</td>
<td width="800px" height="100%" bgcolor="#FFFFFF">

<img src="images/logo/JPEG/Logo/WedDiligence_ver_4.5.jpg" align="left" border="0" name="wdlogo" width="480px" height="252px" />

<object class="slidingtext" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="100">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash/banner/textslide_ver_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed class="wdflyingtext" src="flash/banner/textslide_ver_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="100"></embed>
</object>

<img src="images/Working/gif/dotted4.gif" class="dots" border="0" />

<table style="position:relative; left:5px; top:-340px" class="nav" cellpadding="0" cellspacing="4" width="180px" border="0">
<tr>
<td align="right"><img src="images/Working/jpg/buttons/home_button_hit.jpg" border="0" name="home" /></td>
</tr>
<tr>
<td align="right"><a href="about.html" onmouseover="document.about.src='images/Working/jpg/buttons/about_button_over.jpg'" onmouseout="document.about.src='images/Working/jpg/buttons/about_button_up.jpg'"><img src="images/Working/jpg/buttons/about_button_up.jpg" name="about" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="contact.html" onmouseover="document.contact.src='images/Working/jpg/buttons/contact_button_over.jpg'" onmouseout="document.contact.src='images/Working/jpg/buttons/contact_button_up.jpg'"><img src="images/Working/jpg/buttons/contact_button_up.jpg" name="contact" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="design.html" onmouseover="document.design.src='images/Working/jpg/buttons/design_button_over.jpg'" onmouseout="document.design.src='images/Working/jpg/buttons/design_button_up.jpg'"><img src="images/Working/jpg/buttons/design_button_up.jpg" name="design" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="portfolio.html" onmouseover="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_over.jpg'" onmouseout="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_up.jpg'"><img src="images/Working/jpg/buttons/portfolio_button_up.jpg" name="portfolio" width="143px" height="20px" /></a></td>
</tr>

</table>

<img src="images/Working/jpg/welcomebar.jpg" border="0" class="bar1" width="325px" height="23px" />
<div class="welcometext">
We are a small web design & development company, specialized in quality web design for small businesses.
</div>

<img src="images/Working/jpg/whybar.jpg" border="0" class="bar2" width="325px" height="23px" />
<div class="whytext">
We, at Web Diligence, understand your need for an attractive, high quality website at an affordable price.
We create websites that are an effective combination of functionality, style, and creativity.
We specialize in custom web design as well as website makeovers.
</div>

<img src="images/Working/jpg/herebar.jpg" border="0" class="bar3" width="325px" height="23px" />
<div class="empowertext">
Not the other way around. We believe that it is your idea's, as well as ours that will make your site convey the message you're aiming for.
Whether you're re-vamping an existing site, or starting from scratch, we can design a site that not only captures your imagination,
but also fits into a small business budget.

</div>
</td>

<td class="shadowright" height="100%" width="32px" rowspan="20">
</td>
</table>
</body>

</html>

Stop Vertical Scrolling From Long Text

Similar Tutorials

View Content

I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods

ie

testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something

how can I make css break that up so the browser window won't scroll vertically?

Window Resize Breaks Vertical Menu

Similar Tutorials

View Content

I know this is an easy fix, I just don't know it. Basically I have a vertically that spans the top of my page, but if the window is too small or resized too small, the menu is broken into two parts, the part that doesn't fit the menu forms a new line. How can this be fixed? Much thanks!

Here's the site with the issue: http://www.entertainmentengineering.com/v6.issue1/
Reply With Quote

Inner Div Remaining Height Issue

Similar Tutorials

View Content

Hello,

I would like to know how to do this:

I have a fixed-size div and several inner divs in it, positioned vertically (on top of each other). I want the last div's size to be equal to the size of the fixed-size div minus all the other divs (currently, one other div).

Example: I have a form, which has a certain height. The form has a header and a section (div) with 3 inner checkbox divs (columns), and I want the checkbox divs to scroll if they overflow the main div and in effect the parent div.

Is there any way to do this? Thanks!

EDIT:

Here is a live example. (in this example, there's an extra div within the child div holding the checkboxes) Currently, instead of the desired solution each checkbox div is 70% of the height of the main parent.

helenas flower abode.com /

pictures.php?width=800&height=1118&picturediv_height=366&pngalt=.png&js=1&action=search

EDIT2: I changed the structure of the site and the page link as well, and you can't see the temp. fix in Firefox and possibly in IE7 (tested in IE6).

EDIT3: Anyone?

100% Of Remaining Height Of Parent

Similar Tutorials

View Content

This is something I've never been able to figure out a good solution for. I've found a few posts about the same issue, but in more specific terms. Quite often they also speak about how to fill the entire viewport in some way.

Anyway. Let's say we have a container:

<div id="container"></div>

Inside this container we have sort of a caption element. An element that is dynamic in height. Font size, padding, margins and the like will affect how high it gets in the end.

<div id="container"><h2>My Dynamic Height caption</h2></div>

Now. If i add another "sub container" in there. How do i make it take up the remaining space (height) of the parent container, no matter the size of the parent container and no matter the size of the sibling's dynamic height content (the h2 in this example)

<div id="container">
<h2>Caption</h2>
<div id="subContainer">
I want this div to be as high as what's left of "container"
</div>
</div>

I know I can do this with javascript, calculating exact dimensions of subContainer based on the current environment. I even have a CSS solution, making "container" position relative and positioning subContainer absolute with left,right,bottom = 0 and top = somewhat close to how high the h2 is.

Any other ideas?

Div To Fill Remaining Area?

Similar Tutorials

View Content

I'm (noobishly) developing a site and want a menubar of fixed size at the top, with the remaining area of the window filled with a div containing the scrolling content.

It's height should be effectively 100% - size of menubar.

When I tried 100% height it natually was the full screen height, but then the whole page is full screen height plus the height of the menu bar.

Does anyone know how to size a div to meet my needs?

<span> Not Remaining Inline?

Similar Tutorials

View Content

Hi, there.

I've created a simple 2-column list using a <span> to justify items I want in the right column to the right edge of the containing <div>... everything is working fine in Firefox, but have just noticed that Internet Explorer is punching all the spans down one line. I thought spans were purely inline, so this is a little confusing!

Here's the CSS I'm using:
Code:

#300px-LIST {
width:300px;
margin:0px auto;
text-align:left;
padding:0;
}

.right {
	float: right;
}

...and the HTML:
Code:


<div id="300px-LIST">
LINE 1 LEFT<span class="right">LINE 1 RIGHT</span><br />
LINE 2 LEFT<span class="right">LINE 2 RIGHT</span><br />
LINE 3 LEFT<span class="right">LINE 3 RIGHT</span><br />
</div>

Any pointers gratefully received!

100% Remaining Height Of Parent Div

Similar Tutorials

View Content

I am trying to make sure that the body div takes up all the available space in div container (the parent div), however:
Code:

height: 100%;

makes it take up 100% of the whole page, not just the container.

Here is my source code:
Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Home -- OpportunIT</title>
		<link href="main.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="alternate" type="application/rss+xml" title="OpportunIT News Feed" href="http://www.sphinxgaming.com/OpportunIT/" />
		<link rel="shortcut icon" href="favicon.ico" />

	</head>
	
	<body id="test">
		<div id="container" class="rounded-corners">
				<div id="header">OpportunIT</div>
				
				<div id="nav-menu"><ul>
				<li><a href="?page=home">Home</a></li>
				<li><a href="?page=software">Software</a></li>

				<li><a href="?page=about">About us</a></li>
				<li><a href="?page=contact">Contact us</a></li>
				</ul></div> 
				
				<br/><br/>
				<div id="body">
					Welcome to OpportuneIT!<br/>
<br/>
<b>What's New:</b><br/>

<a href="?page=sinc">SiNC Framework Announced</a><br/>
SiNC is a framework used to manage computers and networks in a secure,<br/>
reliable, easy to learn and use way. SiNC can make almost any network<br/>
management tasks simpler, such as transferring a file over a secure<br/>
connection, running commands on or even remotely controlling computers,<br/>
checking the status of various servers, computers and online services<br/>
automatically, simplifying networked programming tasks and managing network<br/>
security.<br/>
<br/>

<a href="?page=home">Renamed and Redesigned!</a><br/>
We have been renamed to OpportuneIT, and are working on a brand new<br/>
website... Stay tuned for more info on this.<br/>				</div>
		</div>
	</body>
</html>

Code:

html, body {
height: 95%;
}

#container
{
	height: 100%;
	width: 95%;
	margin-left: auto ;
	background: #FFFFFF;
	margin-right: auto ;
}

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu
{
	margin-left: auto ;
	margin-right: auto ;
	width:40em
} 

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
} 

#body
{
	height:auto;
	width: auto;
	margin-left: auto ;
	background: #FFFFFF;
	margin-right: auto ;
	padding: 5px;
}

#header
{
	margin:0px;
	padding:0px;
	background: #000000;
	width:auto;
	height:54px;
	font-family:Verdana;
	font-size:30px;
	text-align:center;
	color:#FFFFFF;
	border-bottom: #AAAAAA solid 5px;
}

#footer
{
	margin:0px;
	padding:0px;
	background: #000000;
	width:auto;
	height:24px;
	text-align:center;
	color:#FFFFFF;
}

.rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 19px;
	border-style:solid;
	border-width:20px;
}

Thanks in advance.

Setting Remaining Width

Similar Tutorials

View Content

Ok so I have a logowrap layer which is at 100%.
I have the actual logo set with 'float:right;' with a width of 900px.

Now i have a layer just before that with float:left;, but i want to set the width with the remaining space, so all resolutions will render it the same way, whether it be a 1280*760 - or whatever.

CSS:
Code:

#logowrap	{
width:100%;
background-color:#000000;
			}
			
#logonavtext	{
float:left;
color:#0099FF;
padding:2px;
				}
		
#logonavtext ul	{
list-style:none;
				}
				
#logonavtext li	{
display:inline;
margin-right:30px;
				}
		
#logowrapimg	{
float:right;
width:900px
				}

HTML:
Code:

<div id="logowrap">
<div id="logonavtext">
<ul>
<li>[ I ]</li>
<li>[ II ]</li>
<li>[ III ]</li>
<li>[ IV ]</li>
<li>[ V ]</li>
<li>[ VI ]</li>
<li>[ VII ]</li>
<li>[ VIII ]</li>
<li>[ IX ]</li>
</ul>
</div>
<div id="logowrapimg">
<?php 
include('scripts/logorandom.php');
?>
</div>
<div class="clear">
</div>
</div>

Any help would be great.

Of course If you have a better way, I would more then welcome it.

How To Use Different Css When Javascript Is Enabled And Disabled

Similar Tutorials

View Content

This was bugging me for a while last week, devshed and google weren't helping much so I wrote my own. Basically if you're trying to get a Javascript enabled site to degrade then instead of writing a clumsy function to walk the DOM and "activate" your funky UI elements just document.write a CSS style block. Mind numbingly simple... and it works:

Link:
http://www.cyclomedia.co.uk/?40

Code:
Code:

<head>
   <link rel="stylesheet" type="text/css" href="javascript_disabled.css">
   <script type="text/javscript">
      if( document.getElementById )
         document.write('<' + 'link rel="stylesheet" type="text/css" href="javascript_enabled.css">');
   </script>
</head>

www.cyclomedia.co.uk - ASP, CSS and AJAX demos, examples and tutorials with free source code download

Simple One I Think - Vertical Navigation Bar - I Want To Vertical Align The Text

Similar Tutorials

View Content

Hi,

Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables.

My page is on:
http://www.3003online.com/demos/ecoceylon/v2/

You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox.

Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this?

Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions).

The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately

[ this is a follow up to my previous thread
http://forums.devshed.com/showthread.php?t=270438

Any help would be greatly appreciated.

Thanks very much.

Scrolling Through A Div

Similar Tutorials

View Content

Hi guys,

I've this div with overflow:auto.
This div is populated using xmlhttprequest (it's an IM chat) so it will be getting full to the point where there's an overflow and the scrollbar shows up.
What I would like to do is, whenever a new content line was added to the div (I'm using DOM to do so), the scroll (if overflow has happened) would go all the way down in a way where the last line of visible text in the div would always be the last line inserted.
I'm somewhat newbie at this stuff so, any help in the right direction would be great!

Thx

Hugo

Div Scrolling

Similar Tutorials

View Content

Good morning,

I have a problem with a layer(div) that I am putting over my page everytime the user clicks a button and a transaction is send to the host. My problem is that if there is an scroll and the user scroll, the message scrolls up and dissapears. I need to fix it to the center of the screen. I have tried with % instead of absolute px. Can anyone help me, please?. I am close to my deadline, so any help would be really apreciated.

I am attaching my code:
window.onbeforeunload=new Function("Procesando.style.visibility='visible';");

window.onblur=new Function("Procesando.style.visibility='hidden';");
//window.onfocus=new Function("Procesando.style.visibility='hidden';");

document.write('<div style="position:absolute; top:160; left:313; visibility:hidden; overflow:hidden; background-color:#CCCCCC; clip:rect(12,177,50,3); " id="Procesando">\n'+
'<select size=4 name="cbEspera" class="TextoTablaIzq" style="background-color:#CCB8E0; font-Weight:bold;">\n'+
'<option> </option>\n'+
'<option>      Procesando su petici'+unescape("%F3")+'n.  </option>\n'+
'<option>      Espere por favor... </option>\n'+
'<option> </option>\n'+
'</select></div>\n');

Css And Scrolling

Similar Tutorials

View Content

Hey guys!! I got a quick question. I have a CSS layout page with 2 scrollbars. The first one for a news section and the second for a product. I have a lot of content for both sections, The scrollbars work fine, but on the main IE the scrollbars keep adjusting to the content that I have. if i have less content then its small.....
I want to have no scrolling on my main window.

Need To Fix Scrolling.

Similar Tutorials

View Content

Scrolling Content

Similar Tutorials

View Content

Not sure if this is a CSS question or a Javascript question. Leaning towards CSS so here goes:

Please refer to:

http://www.larreamma.com/

When the page is first loaded the scrolling 'News & Events' content initially displays... outside the container it is allocated to(?). That is, a couple of lines briefly display below the 'News & Events' background. Once it is "loaded" it displays within the box, as expected. Can this be eliminated?

The scroller being used is 'DOMnews 1.0' from http://onlinetools.org/tools/domnews/ . I had inquired there some time ago but have not gotten a reply.

Thank you in advance.

Positioning Scrolling Div's

Similar Tutorials

View Content

I have 2 DIV's on a page, both DIV's are scrolling. I want to place 1 DIV below another. Is there a way of positioning the top of the bottom DIV a fixed distance below the bottom of the top DIV?

Scrolling Within Div, Not Page

Similar Tutorials

View Content

I have a scrollable DIV on a page, I also have a DIV containing a button which has a fixed position. Is it possible to get the button to scroll withing the DIV and not with the actual page? If so, besides having the code for the button inside the tags of the scrollable DIV, do I need anything else?

Automatic Scrolling

Similar Tutorials

View Content

I was wondering if there was a way with CSS, to create a box, where the text within automatically scrolls.

For example, I have a box that has a date, and then the latest news. Say that there are about 20 lines worth of text, but the box itself, is only 10, I wanted the text to scroll from bottom to top automatically. I know I could probably do something like this in flash, and I'm guessing javascript as well. But don't want to use javascript.

Any help would be appreciated. Thanks.

Aaarrrgghh - Ie6 Scrolling Bug

Similar Tutorials

View Content

Hey,

I was half-way through doing an Unreal Tournament (fab game) related site using CSS and XHTML Strict, and suddenly IE6 decides it's going to mess me about. Surprise surprise!

A current version of the site can be found he
URL

The CSS of which can be found he
URL

In Mozilla and Konquerer it's perfect, but IE6 is shaving off the bottom bit of the document, leaving me unable to scroll all the way to the bottom. I find that it only renders one 'full screen' (F11) worth of content, before cutting it off, which is quite frankly bizarre. There should be five paragraphs of placeholder text visible. I'm also getting strange text-selection bugs, which I suspect are related.

I've found a few sites that tell of a common IE6 CSS scrolling bug, which can be fixed by either refreshing the page, or pressing F11 twice, or putting a clearing <div> underneath the content. This isn't the case here. I've also tried making the #main div relatively positioned (I hear IE6 doesn't like absolutely positioned divs all that much), and also setting 'height: 100%' in the body and #all divs, but to no avail.

Oh, and I'm using WinXP SP1, if that makes any difference.

Please please please help, I'm fast running out of hair to pull out.

Cheers.