CSS - Page Centers In Browser But Has Scroll Bar That Allows Content To Move

The main content of my site is stored in a fixed position div cell and when the content expands the cell to be longer than the window is tall, the content just disappears off the bottom of the browser rather than creating a scroll bar on the browser.

The fixed position works really well for the way this layout is set up. Is there some way to get the window to scroll when content exceeds window size with this set up?

Here is the relevant CSS
Code:

#side_art {
	background-image: url("images/sideart.png");
	background-repeat: no-repeat;
	position: fixed;
	top: 0px;
	left: 0px;
	
	width: 277px;
	min-width: 277px;
	height: 585px; 
	min-height: 585px;
}

#top_tear_shadow {
	background-image: url("images/top_tear_shadow.png");
	background-repeat: repeat-x;
	background-position: bottom right;
	
	position: fixed;
	right: 0px;
	top: 0px;
	
	width: 80%;
	min-height: 20px;
	
	margin-top: 40px;
	margin-left: 200px;
}

#main_shell {
	background-color: #FFFFFF;
	background-image: url("images/coffeestain.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	
	position: fixed;
	right: 0px;
	top: 0px;
	
	width: 80%;
	min-height: 400px;
	
	margin-top: 60px;
	margin-left: 200px;
	margin-bottom: 20px;
}

#bottom-left_grunge {
	background-image: url("images/bottom-left_grunge.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	
	bottom: 0px;
	left: 0px;
	
	width: 100%;
	min-height: 400px;
	height: 100%;
}
#main_content {
	padding: 0px 0px 5px 20px;
	clear: both;
	
}
#left_cell {
	clear: none;
	float: left;
	width: 70%;
	height: 100%;
	background-color: red;
}

#right_cell {
	clear: none;
	float: right;
	width: 30%;
	height: 100%;
	background-color: lime;
}

(I know it seems like a lot, but there's a lot of things nested)

Here is a link to the page [here] If the content doesn't go below the browser line for you, just shrink your window until you see what I'm talking about.

This must be a very basic question but I'm all confused.

Have a left sidebar div positioned (top, left)=(0,0) fixed, a header div positioned (0,sidebar-width) fixed, and a content div below the header at (header-height, sidebar-width) holding a tall table.

Experiments with a body margin worked at one point, but the content would show on the margins when it scrolled, so I nested a div inside the sidebar and header and moved those to the (left: 0) and (top: 0) respectively. Eventually I lost the plot completely.

1) How do I get the sidebar and header to float above the content div, so the latter could scroll out of sight under the former?

2) How do I force the div header to match the width of the content div below if a user zooms the text and grows the content div or table width?

site
css

View the index in IE and FF... It is centered how I want it in IE (directly under the picture), but not in FF.

How can I fix this? (I realize it's most likely a bug in IE that allows it to display the way I thought it was supposed to, so what's the right way to get this to work?)

Thanks
Enjoy your weekends
Bryan

Hi there,
I'm trying to get the images from each page to be centered in their td's, which appears to work fine in FF, but not in IE. Any help is greatly appreciated.

here's the css;
Code:

.borders {
	border: 1px solid #666666;
	text-align:left;
	font-family:Century Gothic, Arial, sans-serif;
	font-size:11px;
	align:center;
}

}
.text {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:center;
	
}

}
.listtext {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:left;
	border: 1px solid #666666;
}


table.menu {
border:1px solid #999999;
background:#CCCCCC;
align:center;
}
table.menu a:link, table.menu a:visited {
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;

}
table.menu a:active, table.menu a:hover {
color:#CCCCCC;
background:#006600;
}


table.menu a {
	width:144px;
	display:block;
	font-family:Century Gothic, Arial, sans-serif;
	font-size:12px;
	line-height:16px;
	color:#006600;
	text-decoration:none;
	padding: 2px 2px;
 } 

.GPlink {
font-famil:Century Gothic, Arial, sans-serif;
font-size:10px;
color:#000000;
}
.GPlink a {
font-family:Century Gothic, Arial, sans-serif;
font-size:10px;
align:center;
color:#333333;
}

.pagetitletext {
font-family:Century Gothic, Arial, sans-serif;
font-size:13px;
align:left;
color:#006600;
font-weight:bold;
}

.piccenterind 
{width: 212px; margin-left: auto; margin-right: auto;}

.piccentercont
{width: 322; margin-left: auto; margin-right: auto;}

and the html;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kyrtsakas Law - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Kyrtsakas Law Office - Title Insurance from an experienced Real Estate Lawyer offers the best protection for your investment">
<meta name="keywords" content="Kyrtsakas, Law, Law Office, Lawyer, real estate, estate, will, title, Windsor, purchases, mortgages, power of attorney, attorney, CAW">
<link href="kyrtsakas_styles.css" rel="stylesheet" type="text/css">
</head>

<body topmargin="0" bgcolor="#666666">
	
	<table width="640" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" class="menu">
  		<tr valign="top">
			
    		<td align="center" width="640" colspan="6"> 
					<img src="images/Kyrtsakas_Header.jpg" alt="Kyrtsakas Law Office" name="header" id="header"> 
   			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com">Home</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/profile.htm">Profile</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/tools.htm">Online Tools</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/contact.htm">Contact</a>
			</td>
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

			<td width="212" colspan="2" class="borders">
					<br>
					<div class="pagetitletext">Home</div><br>
					Welcome to <b>Kyrtsakas Law Office</b>.<br><br>
					<b>Christos Kyrtsakas</b>, <b>L L .B.</b><br><br>
					"For Nineteen years I have practiced law with an emphasis on <b>Real Estate</b>, including <b>Purchases, Sales, Mortgages</b>,
					and <b>Estate Law</b>, including <b>Wills, Powers of Attorney, and Probate</b>."<br><br> 
					Call me today at (519)-974-6303 for an appointment to discuss your particular needs.<br><br>
					CAW Plan Welcome!<br><br>
					"<i>Having a Lawyer Makes it Safer for You</i>!"<br><br>
			</td>
			
			<td colspan="2" width="212">
				<div class="piccenterind"><img src="images/Kyrtsakas_sign_sm.jpg"></div>
			</td>
			
    		<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

			<td class="borders" width="428" colspan="4">
				&nbsp;
			</td>
			
    		<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

		</tr>
	</table>
	<table bgcolor="#CCCCCC" align="center" width="640">
		<tr>
			<td align="center" class="GPlink" colspan="6">
				website designed & maintained by <a href="http://www.graphixplus.com" target="_blank">Graphix Plus Web Development</a> - 2005
			</td>						
		</tr>
	</table>
</body>
</html>

So I'm working on a website of mine that needs a varying amount of content boxes (divs with content in) per page.

The way I want them to display however, is the catch. So I'll explain what I want first, and then show what I've done at the moment.

What I want
I want them to display at around 10% from the bottom of the user's page. And be anchored to that point.
So no matter what size the browser window is, the content will be fairly similarly laid out (within reason).

SO. If a page needs only one content box (one div with content in), I want the bottom left corner of that div to be 10% up the users browser window from the bottom of the page.

BUT. Then if I want 2 divs of content on that page, I want the 1st div to be pushed up the page by the 2nd, and have the 2nd div's bottom left corner 10% up the user's page.

And then with the same pattern every time I add another div.

So to try and make sure you get it, I drew these.

On a page that needs 1 content box - http://img163.imageshack.us/img163/945/1div.jpg
On a page that needs 2 content boxes - http://img715.imageshack.us/img715/33/2divs.jpg
On a page that needs 3 content boxes - http://img693.imageshack.us/img693/1484/3divs.jpg

So what I've done
Is.. used a container div that is situated at that point of the page that I want the divs to align from.

But because I failed at trying to relatively position them, I just positioned them with absolute values. Which is far too rigid for what I need.

At the moment it has 3 divs to show the process I want. The 1st content div obviously then has to stay at the bottom, so I need to move my content to other divs when I want to add something below an existing one.

Another problem/requirement is that if one of the divs has more lines of content than the other, big inconsistent gaps emerge. So depending on the size of the div, it would need to get pushed further, or less, up the page.

HTML
Code:

<div id="content-container">
<div id="content1">
abc
</div>
<div id="content2">
def
</div>
<div id="content3">
ghi
</div>
</div>

CSS
Code:

#content-container {
	width: 1px;
	height: 1px;
	position: absolute;
	bottom: 10%;
	left: 10%;
}

#content1 {
	width: 600px;
	height: 10px;
	position: absolute;
	bottom: 110px;
}

#content2 {
	width: 600px;
	height: 10px;
	position: absolute;
	bottom: 250px;
}

#content3 {
	width: 600px;
	height: 10px;
	position: absolute;
	bottom: 390px;
}

Basically I want it to be flexible, rather than rigid.

Which I had hoped could be fixed with relative positioning, but I couldnt manage that.

Good day,

I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated.
Code:

#sectionHeader {
	width: 800px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
}

Code:

<body>
<div id="sectionHeader">
<img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" />
</div>
</body>

Hi, I've been trying for a while to get to grips with this css lark, but i find some of it really confusing, not being able to make sites that look the same in all browsers without using tables.

So here I arrive at my latest problem. I have made a static site, where resizing the browser doesn't adjust the size of the content. In my logic this ought to mean that scroll bars should appear when the content is bigger than the window, but oh no, everything is just hidden! Am I missing a vital trick here?

The code:

Code:

<div class="title">
	<img src="face.jpg" alt="Picture" width="75" height="75" />
	<img src="title.jpg" alt="Title" width="300" height="88" />
</div>

CSS:

Code:

.title {
	position: fixed;
	left: 10px;
	top: 15px;
	width: 375px;
	height: auto;
}

Just to clarify: When, with the code above, the browser is resized to be small than the width of the div, I expect scroll bars to appear to be able to see the content, but currently it is just hidden.

Can anyone help me?
Thanks in advance

i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as:

header record1 record2 record3 record4
column1 column1 column1 column1 column1
column2 column2 column2 column2 column2
column3 column3 column3 column3 column3
column4 column4 column4 column4 column4

what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work.

Here is the code, its in php but its not big or too hard to figure out.

PHP Code:
echo '<div id="tableheader">';
for ($i=0; $i<count($info); $i++) {
    echo '<p>'.$info[$i][name].'</p>';
}
echo '</div>';

for ($i=0; $i<count($data); $i++) {
    if (!($i & 1)) {
        echo '<div class="even">';
    } else {
        echo '<div class="odd">';
    }
    for ($j=0; $j<count($data[$i]); $j++) {
        if ($j == 0) {
            echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>';
        } else {
            echo '<p>&nbsp;'.$data[$i][$j].'&nbsp;</p>';    
        }
    }
    echo '</div>';
}
echo '</div>';
?>
</div> 





and my css is:
Code:

#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
  
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;} 
.even {position: relative; float: left;}

#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black;  border-bottom: 1px solid black;display: block;}

Any ideas?

Thanks

When I scroll up and down my page, parts of my background image I have set (aka sliding door or box or container...) disappears!!! I don't understand, I tried getting rid of all the color and hover options and it still doesn't work right. I posted my code below if someone can help me!!! If needed I can always email the images if you can't work without them, I just need to get this figured out! Thanks a bunch!!
Toni Lynne

HTML
<td width="247" class="splitright">
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Welcome to Joy!</h2>
<p>Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy! Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy!</p>
<br />
</div></div>
</div>
</td>


CSS
/* background box */
.box {
background: url(images/bottom-left.gif) no-repeat left bottom;
}

.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 4%;
}

.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}

.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 4%;
}

.box h2, .box p {
padding-left: 4%;
padding-right: 4%;
}

.splitright {
background: #ffffff;
width:38%;
float: right;
overflow: hidden;
text-align:justify;
}

a:link { color: #fea11d; text-decoration: none; }
a:hover { color: #999999; text-decoration: none; }

I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space.

Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default?

Thanks for any help.

alright I'm stumped so please please please help me out!

I have a page that's 100% in height, and usually there's more information so you have to scroll down. but I can't seem to activate the scrollbar. I've tried overflow, messing with the height attribute, i have no idea how to solve this. my page: http://www.aapinboom.nl/luxeduinvil...ntroductie.html

and this is the code:
Code:

html,body {	
	background-image: url('../images/bg.gif');
	margin-top: 0px;
	margin-bottom: 0px; 
	margin-left: 0px; 
	margin-right: 0px;	
	font-family: "Trebuchet MS";
	font-size: 13px;
	height: 100%;
	}
	
#center {
	text-align: center;
	width: 100%;
	height: 100%;
}

#container {
  margin-left: auto;
  margin-right: auto;
	width: 600px;
	height: 100%;
	border: 1px solid #B8B8B8;
	background-color: #FFFFFF;
	text-align: left;
}

thanks for any suggestions!

Link To Site

Dear CSS Guruz

If you goto this page in IE and scroll down you will notice the text "Power, Safety, Simplicity, etc" Dissapears! This does not happen in Firefox. It could be a javascript issue but Im not really sure. Anybody have any clues what could cause this?

Louis

Hi,

I have this strange issuewhich is only happening in IE7. When the page loads, the scroll bars begin to flicker. It stops after the page loads completely. And if the page is loading after an ajax request, it scroll bars keep flickering even after ajax response is completed. Please let me know if anyone has any answers to this issue.

The HTML is as follows:

<div id="db-overlay-popup-box" class="overlay-popup-box">
<div id="database-list-popup"><form>....</form></div></div>

The CSS used for the div elements is given below.

#db-overlay-popup-box {
min-height: 200px;
height: 400px;
position: absolute;
width: 40%;
margin-left: 30%;
top: 15em;
border: 2px solid #3282b6;
z-index: 999;
padding: 10px;
background-color: #fff;
}

#databaselist-databases {
list-style-type : none;
clear: both;
overflow: auto;
position: absolute;
width: 90%;
margin-left: 1em;
padding-left: 1em;
right: 1em;
white-space: nowrap;
}

.overlay-popup-box {
position: absolute;
z-index: 999;
width: 40%;
margin-left: 30%;
border: 2px solid #3282b6;
padding: 10px;
background-color: #fff;
}

OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here

I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here


Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS.

thanks