CSS - Page Length Or Overflow?

I use this css:

#clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */
clear: both;
height: 170px;
overflow: hidden;
}

#footerbox { /* BOX FOR THE FOOTER */
height: 170px;
width: 759px;
margin:0 auto;
padding:0;
margin-top :-170px;
text-align: center;
}

It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available?

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

Hello,

I'm trying to make the left and right divs increase length with the centre (content) div.

http://offhourscomputing.com/test.htm

I've tried experimenting with using 100% and auto for the height, but that either makes the left and right sides exactly 100% of the height space in my browser or makes them disappear (using auto).

Thanks.

Hi,

I need some expertise in trying to get equal length columns on a site. I'm completely revamping a site and having trouble with a two column layout. The right column just stops halfway down the page. What am I doing wrong.

The CSS is

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

p {
padding: 10px;
}

ul
{
list-style-type: disc;
display: list-item;
}

li {
}

h1 {
padding: 10px;
text-align: right;
font-size: 20px;
}

h3 {
font-size: 14px;
font-weight: bold;
}

,clear {
clear: both;
display: block;
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}

#wrapper {
margin: 0 auto;
float:left;
width: 100%;
}

#topadsense {
float:left;
padding: 10px 10px 10px 10px;
}

#bookmarking {
float:left;
padding: 10px 10px 10px 10px;
}

#printerfriendly {
float:right;
padding 10px 10px 10px 10px;
}

#content {
float: left;
color: #333;
background: #FFFFFF;
width: 50%;
display: inline;
}

#pagecontent {
float: left;
color: #333;
background: #FFFFFF;
width: 75%;
display: inline;
}

#header {
color: #333;
width: 100%;
float: left;
margin-left: 0px;
margin-right: auto;
height: 250px;
background: #FFFFFF;
}

#pageheader {
color: #333;
width: 100%;
float: left;
height: 75px;
background: #FFFFFF;
}

#footer {
clear: both;
width: 100%;
position: relative;
text-align: center;
color: #000;
background: #FFFFFF;
}

#footerbreak {
width: 100%;
height: 25px;
clear: both;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #FFF;
background: #000000;
}

#supportfooter {
float:left;
}

#navigation {
float: left;
width: 100%;
height: 25px;
color: #333;
background: #CC0033;
}

#leftcolumn {
color: #333;
background: #EBE3CD;
width: 25%;
float: left;
}

#rightcolumn {
color: #333;
background: #EBE3CD;
width: 25%;
float: left;
display: inline;
}

#footerleft {
color: #000;
background: #FFF;
width: 33%;
float: left;
margin-left:auto;
margin-right: auto;
}

#footerright {
color: #000;
background: #FFF;
width: 33%;
float: left;
margin-left:auto;
margin-right: auto;
}

#footermiddle {
color: #000;
background: #FFF;
width: 33%;
float: left;
margin-left:auto;
margin-right: auto;
}

#redcolor {
color:#CC0033;
text-align: center;
font-weight:bold;
}

#topheader {
margin-left:auto;
margin-right: 0px;
}

and the page has this setup:
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>PC Hell: How to Start Windows in Safe Mode</title>

<link rel="stylesheet" type="text/css" href="/common/style.css" /></head>
<body>
<div id="wrapper">
<div id="pageheader">
<h1>How to Start Windows in Safe Mode</h1>
</div>
<div id="navigation">
</div>
<div id="wrapper">
<div id="pagecontent">
<div id="topadsense">
<!--#include virtual="/adsense336.txt" -->
</div>
<div id="bookmarking">
<!--#include virtual="/bookmarks.txt" -->
</div>
<div id="printerfriendly">
<A href="/print/printpage.php"><b>Printer Friendly Version </b><img src="/images/printicon.gif"></A>
</div>
Main body of content is placed here
<div id="supportfooter">
<!--#include virtual="/support/supportfooter.txt" -->
</div>
</div>
<div id="rightcolumn">
<p><!--#include virtual="/adsense.txt" --> </p>
<br />
<br />
<p align="center"><!--#include virtual="/searchtables2.txt" -->
</p>
</div>
</div>
<div class="clear"></div>
<div id="footerbreak"><strong>Recommended Software
for PC Hell Visitors</strong>
</div>
<div id="footer">
<!--#include virtual="/indexfooter2.txt" --></div>
</div>
</body></html>



Any help is appreciated. I have a wrapper div that should do the trick, but its not working.

Thanks,

Mark

The picture you can see is part of a PSD which I'm now "converting" into html... anyway, I'd like to know whether there is a CSS attribute that can define the exact width of borders?

Hi everyone.

This is my first venture into laying out pages using style sheets.

If you have a look at the attached image you will see what I need done. Please ignore the pink lines, it's ust my graphic designer slicing up images.

I'm pretty sure that I can create the colors, borders, positioning etc. I just don't know how to make the left column grow with the right column when more text is added.

Help anyone?

Thanks in advance.

Alright, I am new to these forums since the other handful I have went through could not help me out.

Here is my situation, I have a layout I am creating for a final project, and I have it set up so that the navigation is in a left column and the content for the actual page is in a right column, right. Both are right next to eachother which you can see below in this image:



http://img232.imageshack.us/img232/...sitebug5la1.png



My issue is that once the content within the Right Column expands beyond the browser and creates a scroll bar, the left column no longer expands it's background image to match up.

All containers and elements have their height set to 100% that are involved.



HTML: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/css; charset=ISO-8859-1" />
	<title>Digital Foundations Final Project</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="allcontent">
<!--PRINT LOGO-->
 <div id="logo_print"></div>
 

<!--LEFT COLUMN-->
<div id="left_column">



<!--NAVIGATION-->

		<ul>
		     <li id="home"><a href="index.html"></a></li>
		     <li id="students"><a href="students.html"></a></li>
		     <li id="faculty"><a href="faculty.html"></a></li>
		     <li id="facilities"><a href="facilities.html"></a></li>
		     <li id="maps"><a href="maps.html"></a></li>
		</ul>
<!--RIT LOGO-->
<div id="logo_rit"><a href="http://www.rit.edu"></a></div>

</div>

<!--RIGHT COLUMN-->
<div id="right_column">
<!--CONTENT-->
	<div id="header_home"></div>

<div id="content">


<p class="text">Fusce ut justo sit lectus. Duisque dolorem in non erat, congue nullam fermenterdiet imper velit. Nam rutrum velis ac, doloreet ames iacus por sit amet malestibus sempus. Vivamus dissim et leo, pede sit sit ametus eu malestie vehiculis nonummy a, rhoncus ipsum primis senean ligula, felis et, ac risus</p>

<p class="text">; In cubia tor varius met, venenatoque estibus et nunc vitae odio eget, loreet, blandis vulputate in, nunc ipsum. Nunc. Mauris. Suspendum. Nulla urna quam nunc. Nullam anteget dolorem in, vel, wisi. Nam primis varius. Quis quis nunc gravida. Vest eget hend ipsum sagittis, in et orci eu magna liberos</p>

<p class="text">Integet in dui aliquet. Morbi eleifendum. Quis ligula, magnisse bibero nisl pede, congue nec vulputate ipsum dolor. Nulla varius ipsum primis neque. Suspend ero liberos in accumsan quis nonummy condit ametus non luctus. Pellent posuere consequam quam rhoncus orna. Duis met lectus lectum wisi at a or</p>

<p class="text">atis pellus felit, erat turpiscing ris nullamcorper estibus non orci sempus. Classa ante in ornaretra tempus ac augue. Morbi ut neque. Sed sodalesuada sit a, cursus et dolor, aliquam et, diam rutrum sempus orci bibendis lor. Nam eu convallicies metuer leo. Vivamus erat. Vivamus sit lacus wisis sit a</p>

<p class="text">wisi. Sed ut, condissim turpis wisi. Aliquat libero. Cras dictus dictus in augue nunc. Donec, diam sed, eget, at ligula mollicies at eu wisi. Vestassa met diam varius. Quis parturpis. Nunc a mauristiquat faucibus sapibus a, magna arcu ad lacilis imper commodo et fermenas sed, phare. Alique euismod p</p>



</div>
</div>


</div>
</body>
</html>

CSS: Code:

html, body {
background-color: #262626;
margin: 0;
padding: 0;
height: 100%;
}

#allcontent { 
width: 800px;
margin: 0 auto 0 auto;
padding: 0;
height: 100%;
min-height: 100%;
}

#logo_print {
width: 702px;
height: 209px;
background-image: url(images/logo_main.png);
background-repeat: no-repeat;
margin: 0;
}

#logo_rit {
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
background-repeat: no-repeat;
margin: 50px 0 10px 0;
}

#logo_rit a{
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
display:block;
}



/*----LEFT SIDE OF PAGE----*/
#left_column{
background-image: url(images/BG_left.png);
background-repeat: repeat-y;
margin: 0;
width: 204px;
height: 100%;
float: left;
}


/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}

li#home{
background-image: url(images/nav_home.png);

width: 205px;
height: 52px;
display: block;
}

li#home a{ 
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#home a:hover{ 
background-image: url(images/nav_home.png);
background-position: 204px 0;
}


li#students{
background-image: url(images/nav_students.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#students a{ 
background-image: url(images/nav_students.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#students a:hover{ 
background-image: url(images/nav_students.png);
background-position: 204px 0;
}

li#faculty{
background-image: url(images/nav_faculty.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#faculty a{ 
background-image: url(images/nav_faculty.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#faculty a:hover{ 
background-image: url(images/nav_faculty.png);
background-position: 204px 0;
}

li#facilities{
background-image: url(images/nav_facilities.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#facilities a{ 
background-image: url(images/nav_facilities.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#facilities a:hover{ 
background-image: url(images/nav_facilities.png);
background-position: 204px 0;
}

li#maps{
background-image: url(images/nav_maps.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#maps a{ 
background-image: url(images/nav_maps.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#maps a:hover{ 
background-image: url(images/nav_maps.png);
background-position: 204px 0;
}
/*--END NAVIGATION--*/





/*----RIGHT SIDE OF PAGE--*/
#right_column{
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
width: 498px;
float: left;
margin: 0;
height: 100%;
}
				
#header_home{
width: 498px;
height: 71px;
background-image: url(images/header_home.png);
}

#header_students{
width: 498px;
height: 71px;
background-image: url(images/header_students.png);
}

#header_faculty{
width: 498px;
height: 71px;
background-image: url(images/header_faculty.png);
}

#header_facilities{
width: 498px;
height: 71px;
background-image: url(images/header_facilities.png);
}

#header_maps{
width: 498px;
height: 71px;
background-image: url(images/header_maps.png);
}


#content {
width: 498px;
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
}

p.text{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
padding: 10px 10px 10px 10px;
text-indent: 20px;
}

/*---Letter Linking--*/
p.letters{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
}

p.letters a{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
color: #FF6600;
}

p.letters a:hover{
color: white;
text-decoration: underline, overline;
}

/*---PROFILE IMAGE SETTINGS--*/
.profile{
float: left;
margin: 10px 10px 10px 10px;
width: 200px;
height: 200px;
}

.profile_text{
font-weight: normal;
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
}

.bold{
font-weight: bold;
}

Both the CSS and XHTML are valid
Any help is much appreciated.

Hello,

I have 2 questions - hope that ok moderator?

First. My sidebar, it bugs me. I would like for it be the same length as the #Maincontent, but It is either to long or to short...Does anybody have a idea for a solution?

Second. I would like to have a picture next to the #maincontent, on the right, from top to bottom, and parallel to it, and a bit out. (Sorry I don't know the correct English term).
Kind of like the lines next to the sidebar - which is a background image for #sidebar.
I already got a background image on body.
Is This possible?

In advance, thanks for any help or advice.

And I can't post url... so here is some CSS:
Code:

html { margin-top: 20px; }

body { padding: 0px;  background-color:#e6e2bf; background-image: url('imgs/bag.png'); background-repeat:repeat-x; background-position: top right; padding:30px; margin-bottom:0px;}

#wrap { width: 850px; height: 500px; padding: 0px;  margin-left: auto; margin-right: auto; background-image: url('imgs/right.png'); background-repeat:repeat-y; background-position: top right;}

#maincontent {position: relative; left: 230px; float: left; text-align: left; width: 580px; min-height: 500px; margin-left:10px; background-color:#fff; z-index:2;  }

#header {  background-color: #e5edf2; width: auto; height: 100px; margin-bottom: 30px; top:35px; z-index:3;}

#footer { width: 100%	height: 50px;	margin: 0px auto 30px auto; color: #FFFFFF; background-image: url('imgs/bund.png');	}

#sidebar {position:absolute;  top: 0px;  text-align: left; padding-top: 40px; padding-bottom:200px; width:auto; height:100%;  padding-right:10px; z-index:4; background-image: url('imgs/sidebar_bag.gif'); background-repeat:repeat-y; }

#logo {position: relative; right: 40px;}

I've got a site I've started to work on: domosworld.net

I want it setup so the three middle columns are equal width? I set right/left borders on the middle content, but am worried that perhaps the right side will be longer than the middle which will cause the layout not to look right. What is the best way to achieve the equal columns?

I have a three column layout. The third column is empty except for a background image which I'd like to be the same length as the main (content) centre column. This would ensure the background image in the right column is at the same length as the main content

Any ideas how I can do that?

The site is weary.me.uk/MT

and the CSS is weary.me.uk/MT/css/threeColumn.css

Thank you so much

this is the code i'm having problems with:

Code:

<style type="text/css">

body {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
 	margin : 0;
	padding : 0;
}

/* text */

h1 {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	line-height:30px;
}

/* div classes */

div.row {
	position:relative;
	left:10px;
	width:326px;
	height:20px;
	z-index:1;
	margin-bottom:8px;
	text-align:right;
}

div.cell_title, div.cell_content {
	position:absolute;
	top:0px;
	float:left;
	padding:0px 0px 0px 8px;
	border:1px solid #E4E4E4;
	text-align:left;
	line-height:17px;
	
}

div.cell_title {
 	background-color: #E4E4E4;
	left:0px;
	width:100px;
	z-index:2;
}

div.cell_content {
	background-color:#FCFCFC;
	left:100px;
	width:224px;
	z-index:3;

}

/* form elements */

.input {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:15px;
	width:213px;
	border:0;
	}

.textarea {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:100px;
	width:213px;
	border:0;
	overflow:auto;
	}

</style>

<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
	<div class="cell_title"><label for="name">name:</label></div>
	<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>

<div class="row">
	<div class="cell_title"><label for="email">email:</label></div>
	<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>

<div class="row">
	<div class="cell_title"><label for="message">message:</label></div>
	<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>

<div class="row">
	<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>

My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!).
I hope that you understood my problem and could help my with it.

Thanks in advance!

Hi all,
I'm working on the site http://boolarongpress.com.au and have hit a problem.

In IE7 if you click into either the title or author search fields in the left hand nav menu the cpu usage maxes out and IE7 hangs.

There is no javascript attached to these inputs.

The problem seems to be caused by a line in the css,

overflow: auto;

This is set for the content div so that it scrolls as if it were a frame.

If I remove this line from the css the problem dissappears but of course the content div no longer scrolls.

Has anyone got any ideas on how I can fix/work around this issue?

Cheers,
Peter

hi,

I have 3 DIV's, The first div is like a menu header DIV and the

second DIV is the menu links and the third DIV has some information

I want to click on the first DIV then show the second DIV like a

menu problem is the third DIV moves down.. How can i let the

second DIV overflow over the third DIV without it moving down?

Thanks