# CSS Help



## vipernet (Aug 23, 2007)

Good Day all.

If anyone could help me with some CSS question, I would be greatly Thankful !

Basicly I have created a CSS layout with a header/content/Nav menu and footer. Easy stuff, but I want to remove the scroll bar ( reguardless of Screen resolution). Only have a scroll bar in my Content DIV.

I read some forums and docs out there but they are only used with a header/content/footer. Cant really seem to get it "Just Right". Works ok I guess with IE but I would like it to work with all browsers, or most.

Here is a screenshot of what I would like to have ( reguardless of Screen resolution).










Here is what I have been playing with

*Default.asp*

```
bla bla pics and logo's


Bla bla links and stuff

bla bla info and text 



<--End Menu Div-->
```
*.CSS*

```
html {
	height:100%;
	max-height:100%;
	padding:0;
	margin:0;
	border:0;
	font-size:76%;
	font-family: Verdana, Arial, sans-serif;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden;/* */ 
}

body {
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;

}
#content {
	display:block;
	overflow:auto;
	position:absolute;
	z-index:3;
	top:150px;
	bottom:52px;
	width:412px;
	margin-left:-192px;
	left:50%;
	border-right:0px solid #000;
	background:#fff;
}
* html #content {
	top:0;
	bottom:0;
	height:100%;
	width:613px;
	border-top:154px solid #fff;
	border-bottom:50px solid #fff;
}
#content p {
	text-align:justify;
	margin-left:15px;
	margin-right:15px;
}
#head {
	position:absolute;
	margin-left:-421px;
	left:50%;
	width:640px;
	min-width:640px;
	height:150px;
	font-size:1em;
	z-index:5;
	border-left:none;
	border-right:none;
}
* html #head {
	top:0px;
	width:842px;
	height:148px;

}
#head a .pad {
	display:block;
	width:80px;
	height:125px;
	background:transparent;
	border-bottom:0px solid #000;
}
#menu {
	position:absolute;
	margin-left:-421px;
	left:50%;
	bottom:0;
	width:229px;
	min-width:640px;
	height:50px;
	background-position:0 100px;
	font-size:1em;
	z-index:6;
	border:0px;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
}
* html #menu {
	bottom:50px;
	top:150px;
	width:229px;
	height:100%;

}
#foot {
	text-align:center;
	position:absolute;
	margin-left:-421px;
	left:50%;
	bottom:0;
	width:40px;
	min-width:640px;
	height:50px;
	background:#09446e;
	background-position:0 100px;
	font-size:1em;
	z-index:5;
	border:0px solid #000;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
	color:#FFF;
}
* html #foot {
	bottom:0px;
	width:842px;
	height:48px;
}
```


----------



## tomdkat (May 6, 2006)

I don't know if your page is designed to be of fixed dimensions or fluid dimensions but here is a test case that assumes a fixed dimensions content box:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

html, body { 
	margin: 0; 
	padding: 0; 
	height: 100%; 
	width: 100%; 
	overflow: hidden; 
}

#container { 
	width: 640px; 
	margin: 6% auto 0 auto; 
}

#header {
  color: white;
  background-color: blue;
  text-align: center;
  padding: 1px 0 1px 0;
}

#midsection { 
	position: relative; 
	background-color: green; 
	height: 400px; 
}

.right-side-div { 
	width: 400px;
	padding-left: 10px; 
}

#menu { width: 230px; }

#content { 
	overflow: auto; 
	background-color: white;
	position: absolute;
	top: 0;
	right: 0;
	height: 350px;
}

#footer {
	position: absolute;
	bottom: 0;
	right: 0; 
	height: 50px; 
	clear: right; 
	background-color: black; 
	color: white; 
	font-style: italic;
	text-align: center;
	font-size: smaller; 
}

.clear { clear: both; }
</style>
</head>
<body>
<!-- Main Container -->
<div id="container">

<!-- Header DIV -->
<div id="header">
	<h1>HEADER</h1>
</div>

<!-- Middle DIV -->
<div id="midsection">

<!-- Navigation menu -->
<div id="menu">Navigation</div>

<!-- main content -->
<div class="right-side-div" id="content">
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
</div>

<!-- Footer DIV -->
<div class="right-side-div" id="footer"><p>FOOTER</p></div>

<!-- Clear the DIVs with floats applied to ensure proper height of "Middle" DIV -->
<div class="clear"></div>
</div> <!-- Middle DIV -->

</div> <!-- Main container -->
</body>
</html>
```
Attached is a screenshot in Opera. I don't know how this will render in IE, but you can play around with it and experiment.

The main difference is I put ALL of the content DIVs (header, nav menu, content, footer) inside a container DIV. This allows you to relatively easily control the width of the content box and position the content box on the page easily.

I also put the nav menu, content, and footer DIVs in a "midsection" DIV, to make it easier to control the placement of those three inner DIVs. This "midsection" DIV isn't required and you can position those inner DIVs by using floats or absolute positioning, as you desire. 

I was also able to get rid of some of the absolute positioning by doing the above.

If you want a fluid layout,that can be done as well but some adjustments to my CSS will need to be made.

is this at least close to what you're after?

Peace...


----------



## vipernet (Aug 23, 2007)

Thanks allot for the reply Tom. your code is great for a fixed position, but I want the layout to resize according to the webpage resolution ( if that makes sense).

On the nav(menu) Div I want to use a fixed BG image. 

```
background:url(include/img/theme/bg_menu.jpg) repeat-y;
```
The image dimensions are 229 X 1

Have the Content,header, footer DIV's resize to according to the resolution of the viewer.

Is that do able? Plus im playing with your code to make it work. I will post if I have any luck with trial and error 

Thanks Again Tom.


----------



## vipernet (Aug 23, 2007)

Here is css using your code. and the best I could get. but I want to expand to browser size say 80% middle, reguardless of res size.


```
html, body { 
	margin: 0; 
	padding: 0; 
	height: 100%; 
	width: 100%; 
	overflow: hidden;
	text-align:center;
}

#container {
	width: 80%;
	margin: 2% auto 0 auto;
}

#header {
  color: white;
  text-align: center;
  padding: 0 0 0 0;
  background:url(include/img/theme/top_m_logo.jpg) repeat-x;
  height:151px;
}

#midsection {
	position: relative;
	height: 400px;
	margin:0 0 0 0;
	width: 100%;
	}

.right-side-div {
	width: 412px;
	padding-left: 0px;
}

#menu {
	width: 229px;
	background:url(include/img/theme/bg_menu.jpg) repeat-y;
	margin: 0 0 0 0;
	float: left;
	height: 100%;
}

#content {
	overflow: auto;
	background-color: white;
	position: absolute;
	top: 2px;
	height: 350px;
	left: 229px;
	width: 80%;
}

#footer {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 50px;
	clear: right;
	background-color: black;
	color: white;
	font-style: italic;
	text-align: center;
	font-size: smaller;
	left: 229px;
}

.clear { clear: both; }
```
Any help would be great.

Thanks Tom


----------



## vipernet (Aug 23, 2007)

Looks like I got it, but Tom can you check over my code to make sure it looks ok?

Thanks dude.

*EDIT* - At Res 800X600 it cut o0ff my footer and doesnt resize to fit.


```
html, body { 
	margin: 0; 
	padding: 0; 
	height: 100%; 
	width: 100%; 
	overflow: hidden;
	text-align:center;
}

#container {
	width: 80%;
	min-width:640px;
	margin: 2% 10% 0 10%;
}

#header {
  color: white;
  text-align: center;
  padding: 0 0 0 0;
  background:url(include/img/theme/top_m_logo.jpg) repeat-x;
  height:151px;
  min-width:640px;
}

#midsection {
	position: relative;
	height: 400px;
	margin:0 0 0 0;
	width: 100%;
	min-width:640px;
	}

.right-side-div {
	width: auto;
	min-width:411px;
}

#menu {
	width: 229px;
	background:url(include/img/theme/bg_menu.jpg) repeat-y;
	margin: 0 0 0 0;
	float: left;
	height: 100%;
}

#content {
	overflow: auto;
	background-color: white;
	top: 2px;
	height: 350px;

}

#footer {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 50px;
	clear: right;
	background-color: black;
	color: white;
	font-style: italic;
	text-align: center;
	font-size: smaller;
	left: 229px;
}

.clear { clear: both; }
```


----------



## tomdkat (May 6, 2006)

Thanks for the additional info. I'll work on my original test case first to see what I can get working and then I'll see what changes you made and we'll compare notes. 

Peace...


----------



## vipernet (Aug 23, 2007)

Your the money TOM, Thanks !!!


----------



## tomdkat (May 6, 2006)

Ok, I've come up with something I want to run by some others first before posting here.

Just to make sure I'm clear, are you wanting the height AND width of the content box to resize as the browser window changes size or do you just want the width to change, meaning the height is fixed?

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here is a test page I came up with:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body { 
	margin: 0; 
	padding: 0; 
	height: 100%; 
	width: 100%; 
	overflow: hidden; 
}

#container { 
	width: 80%;
	margin: 2% auto 0 auto;
	position: relative;
	border: 1px solid black;
}

#header {
   background-color: blue;
   color: white;
   text-align: center;
   padding: 1px 0 1px 0;
   height: 100px;
}

#menu {
	position: absolute;
	top: 100px;
	bottom: 0;
	width: 229px;
	background-color: green;	
}

#page-content {
	position: relative;
	margin-left: 229px;
}

#content { 
	overflow: auto;
	height: 350px;	
	padding-left: 10px;
}

#footer {
	position: relative;
  	background-color: black;
  	color: white;
  	text-align: center;
  	padding: 1px 0 1px 0;
}
</style> 
<script type="text/javascript">
function resizeContentArea() {
  browserHeight = document.documentElement.clientHeight;
  newContentHeight = parseInt(browserHeight * 0.6);
  contentElement = document.getElementById('content');
  contentElement.style.height = newContentHeight+'px';

  return;
}
</script>
</head>
<body onload="resizeContentArea();" onresize="resizeContentArea();">
<!-- Main Container -->
<div id="container">

<!-- Header -->
<div id="header">
<h1>HEADER</h1>
</div> <!-- End HEADER -->

<!-- Navigation menu -->
<div id="menu">
navigation
</div>

<!-- Page content -->
<div id="page-content">

<!-- Content -->
<div id="content">
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
<p>Page content goes here!</p>
</div> <!-- Content -->

<!-- Footer -->
<div id="footer">
<p>FOOTER</p>
</div> <!-- Footer -->

</div> <!-- Page content -->
</div> <!-- Main container -->
</body>
</html>
```
Unfortunately, I had to use some JavaScript to make the content area resize as necessary.

Here's the deal: in order to make the content area have a dynamic scrollbar, that DIV needs to have a hard coded height. Without that height, the browser won't know when a scrollbar will be needed and it will resize the DIV to fit the amount of content in that DIV. This will push the footer down and the page is then misaligned.

So, adding a fixed height to the content area DIV makes the scrollbars appear, based on the amount of content in that DIV. Cool.

Unfortunately, this causes the page to NOT render correctly at lower resolutions because the browser level scrollbars are turned off. This can prevent access to the bottom portions of the page not displayed in the viewport (the part of the browser window where the page appears) due to effective cropping. Not cool.

By using JavaScript to detect the height of the browser window (influenced by the screen resolution), I can dynamically set the height of the content area DIV to something that will allow the rest of the page to dynamically resize to fit the viewport AND preserving the scrollbar in that DIV. The problem with this is if the browser has JavaScript disabled, this functionality won't work.

CSS3 provides a "media query" function that can be used to eliminate the JavaScript above, in this case, but I don't know how well supported the CSS3 "media query" function is currently supported by browsers.

Attached are some screenshots.

Hope this helps! 

Peace...


----------



## vipernet (Aug 23, 2007)

Ya Im looking to have my page stay the same reguardless of screen resolution:

Menu would be fixed width: 
width: 229px;
Header would be fixed height:
height:151px;
Footer be fixed height:
height:50px;

Body or Overall page DIV would be somethig like :

```
html, body { 
	margin: 0; 
	padding: 0; 
	height: 100%; 
	width: 100%; 
	overflow: hidden;
	text-align:center;
}

#container {
	width: 80%;
	height:96%;
	margin: 2% 10% 2% 10%;
}
```
When the pge resizes only the content area would expend...etc.

You know what I mean?


----------



## tomdkat (May 6, 2006)

Yep, I understand but the problem is the content area DIV which has the scrollbar will need a fixed height. Otherwise, you get no scrollbar.

Since you want the browser level scrollbars disabled, the content area DIV (with the scrollbar) will need to have its fixed height dynamically adjusted based on the screen resolution.

Take that scrollbar out of the picture and everything else will be fluid as you want.

Peace...


----------



## vipernet (Aug 23, 2007)

haha I think we posted at the same time.

Thats great TOM!!!! thats what I was looking for. I also ran into the same issue over and over again on muti ways of re-writing my div's/css's at smaller res it wouldnt show the footer.


But this works great. Thank you again tom.

Cheers bud


----------



## tomdkat (May 6, 2006)

Yeah, looking back it does appear our posts "passed each other in the ether". 

Good luck!

Peace...


----------



## vipernet (Aug 23, 2007)

Ok figured a new way to maybe do this little easier. I dont really know the syntax of java script.

With your script Tom:

```

```
Could we add a client height detection and load a different browserHeight * XXX

Forgive my Syntax, as I dont know java well but something like this:

```

```


----------



## tomdkat (May 6, 2006)

If you're going to do this, I think you're better off using the height of the viewport as the "base height" for calculating the height of the content area with the scrollbar. The "viewport" height should give you a more accurate height to use. 

My approach simply made the height of the scrollable content area a certain percentage of the browser window height. If you want to detect specific heights and act accordingly, I would look at using the height of the viewport and not the browser window.

Peace...


----------



## vipernet (Aug 23, 2007)

so i would use :


```
screen.heigh
```
other than

```
document.documentElement.clientHeight
```
?


----------



## vipernet (Aug 23, 2007)

This is what I got TOM, will this work?

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
```


----------



## vipernet (Aug 23, 2007)

Ok getting some errors with that script above. This 1 seems to work: ignore the browserHeight * # was just useing numbers to test script.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
```


----------



## tomdkat (May 6, 2006)

I would also tweak your new function like this:


```
function resizeContentArea() {
[b][color=red]
        browserHeight = window.screen.height;
	if ((browserHeight>=800))
	{
		newHeightPercentage = 0.1;
	}
	else
	{
		newHeightPercentage = 0.9;
	}
        newContentHeight = parseInt(browserHeight * newHeightPercentage);
[/color][/b]
        contentElement = document.getElementById('content');
        contentElement.style.height = newContentHeight+'px';
};
```
or you can get fancy and do this:

```
function resizeContentArea() {
[b][color=red]
        browserHeight = window.screen.height;
        newHeightPercentage = (browserHeight >= 800) ? 0.1:0.9;
        newContentHeight = parseInt(browserHeight * newHeightPercentage);
[/color][/b]
        contentElement = document.getElementById('content');
        contentElement.style.height = newContentHeight+'px';
};
```
In any event, I tried out your approach above and I found two issues with it:

It doesn't work properly in Opera. At least not in Opera 10.10 on Linux. I don't know about other versions on other platforms. What I found is, Opera stores the screen dimensions at the time the browser is started and will use those dimensions each time the window.screen object's height and width properties are used. If you change screen resolution without restarting Opera, the DIV resize doesn't work as you expect.
Using the screen resolution as a "control" to determine the height of the content area DIV doesn't account for browser windows which are not maximized. The idea of having a "fluid" page layout is so that the content will automatically adjust based on the size of the browser window. Not everyone runs with their browser window maximized so the above approach won't accommodate these users since their screen resolution won't necessarily reflect the amount of space in the browser's viewport. This is why I suggested checking the browser's viewport height or dimensions if you wanted to go this route. 

EDIT: You can use "window.innerHeight" and "window.innerWidth" to get the viewport dimensions. These should be supported in all modern browsers and older browsers, like IE6, might be problematic. You can get an example solution using these properties here.

Maybe making the content area DIV height a percentage of the viewport height would be the best approach.

Peace...


----------



## vipernet (Aug 23, 2007)

Well after many hours of research ..etc I finally got it just right and working in any resolution and browser.( well most as far as I know)


```
<style type="text/css"> 
html {
height:100%; 
max-height:100%;  
padding:0; 
margin:0; 
border:0; 
font-size:76%; 
font-family: trebuchet ms, tahoma, verdana, arial, sans-serif; 
background:#fff -18px 0 no-repeat; 
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ }

body {
height:100%; 
max-height:100%;
overflow:hidden; 
padding:0; 
margin:0; 
border:0;
}
#content {
display:block; 
height:100%; 
max-height:100%; 
overflow:auto; 
padding-left:239px; 
position:relative; 
z-index:3;
}
#head {
position:fixed; 
margin:0; 
top:0; 
right:18px; 
display:block; 
width:100%; 
height:154px; 
background:url(header_top_m.jpg) repeat-x #ddd; 
font-size:4em; 
z-index:5; 
color:#fff;
}
#foot {
position:fixed; 
margin:0; 
bottom:-1px; 
right:18px; 
display:block; 
width:100%; 
height:50px; 
background:#003366; 
color:#fff; 
text-align:right; 
font-size:1em; 
z-index:4;
}

#left {
position:fixed; 
left:0; 
top:0; 
height:100%; 
width:229px; 
background:url(Menu_bg.jpg) repeat-y #aaa; 
background-position:0 100px; 
font-size:1em; 
color:#fff;
z-index:4;
}

* html #head, * html #foot,* html #left {position:absolute;}

#pad1 {display:block; width:18px; height:100px; float:left;}
#pad3 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:100px;}

#content p {padding:5px;}

.bold {font-size:1.2em; font-weight:bold;}


[TABLE]
[TH]
[TD][IMG alt=""]header_top_L.jpg[/IMG][/TD]
[/TH]
[/TABLE]


Footer




[LIST]
[*]Nav
[/LIST]


Bla bla Content content stuff bla bla
```


----------



## tomdkat (May 6, 2006)

Looks good, but that layout gives you a browser-level scrollbar, which is what you indicated you didn't want in your posts above. 

Did you get inspired by this CSS layout by Stu Nicholls?

http://www.cssplay.co.uk/layouts/body2.html

If so, here are two others by him which might be closer to what you indicated above:

http://www.cssplay.co.uk/layouts/body.html
http://www.cssplay.co.uk/layouts/body4.html

Both of those have scrollbars which apply only to the content area and have the fixed header and left column, as you've got now.

Great work! 

Peace...


----------



## vipernet (Aug 23, 2007)

Your correct Tom I did originally want to go with the centered container but it just became a big headack.

Then ya I found Nicholl's layouts and figure I could go with something like that and give the illusion that it was centered using a image with a white background on the edges, like this:










and repeat the header DIV with this:










All and all, pretty close to what I wanted and works good.

Huge Thanks to you by the way tom, You're a good man!.

Cheers,
Chris


----------

