CSS - Get Div To Extend Full Length Of The Page

Hi folks. I'm so new at CSS it's sad. I'm using a css template and I can't figure out how to get the page shorter. I tried adding overflow, tried setting it to auto or inherit. Pretty sure I'm way off. I see in the stylesheet it's set to be 1100px but I don't need it that long on every page.

This is my first post here so I will wait to see if anyone wants me to post the stylesheet. Thanx so much for the help!

So, I want it so that depending on how much content there is on my page, it will be longer or shorter, so I don't have to stick to a fixed height.

Draft:


I was thinking I need to use a code similar to this link.

Would anyone care to help me out?

Hey, so I've just formatted my first table-free html page, using CSS. It's mostly cool, except that the page length doesn't mesh with the amount of content...
http://mailwerx.ca/grundmans/about_us.htm
The css is at...
http://mailwerx.ca/grundmans/grundmans.css

If anyone knows why this is happening, please tell me! I've played with this for hours! (And I know it's probably something small and stupid.) Thanks!

-Jaeger

It's a classic problem, but I was just wondering if anyone could give me some help on it.

Heres the link to the webpage (note, none of the links or owt work, it's just filler for the mo):
Code:

http://users.aber.ac.uk/jdg8/WebSiteHelp/

I want to the make the sidebars on each side stretch to the bottom of the page (Down to the footer) but it won't seem to go. I've tried following googles advice and it's not working either.
Here's the code:
Code:

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background:#FFF;
	height: 100%;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #FFF;
}

a:link{color:#00B800;}
a:visited{color:#39F}
a:hover{color:white; text-decoration:underline; font-weight:bold;}

#container {
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #666666; /* the auto margins (in conjunction with a width) center the page */
	border: 3px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 

#header {
	background: #999999;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	color: #390;
} 
IMG.ukdm {
	display: block;
	margin-left: auto;
    margin-right: auto;
}


/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the "#sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
#sidebar1 {
	float: left; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 22%; /* since this element is floated, a width must be given */
	height:100%;
	background-color: #555555;
	background-image:url(backgroundshizzle.jpg);
	padding: 15px 0;  /*top and bottom padding create visual space within this div  */
}

#sidebar2 {
	float: right; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 23%; /* since this element is floated, a width must be given */
	height:100%;
	background-color: #555555;
	font-size:14px;
	padding: 15px 0; /* top and bottom padding create visual space within this div */
	text-align:center;
	
}

IMG.albumom {
    display: block;
    margin-left: auto;
    margin-right: auto;
	font-weight:bold;}
	

#sidebar1breaker {
	width: 4%;
	height:680px;
}
#sidebar1 p, #sidebar1 h3, #sidebar2 p, #sidebar2 h3 {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
	
}

#navi{
	display:block;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	font-weight: bold;
	font-size: 17px;
}

#aom{
	font-style:italic;
}

/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
#mainContent { 
	 /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	 font-size:12px;
	 margin-left: 3px;
	 



	
}

#footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#999999;
	text-align:center;
	font-size:9px;
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

It should be noted that I'm not totally sure about CSS and most of it is either stolen from dreamweaver or rehashed together from old websites I made.

Any help I could get would be greatly appreciated.
Cheers.

I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page.

I have
height: 100%;
in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch?
I have tried height: auto; but that doesnt work either.

I am looking for some examples on making this layout:

----------HEADER----------
nav content
- -
- -
- -
-
-
-
-
-
-
----------FOOTER0---------

The page needs to be 100% the height of the browser window with header at top, footer at bottom and the content/nav being a minimum height of enough to fill the screen vertically and should be expandable. Anyone got any pointers?

I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!)

I want to recreate the shadow on the sides of the main container of this blog

the url is blocked just google robin cornett and then find the style sheets

How do I do that?
The blog has two style sheets


My style sheet is at
annieagarwal.com/blog/wp-content/themes/tofurious/style.css

I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png

But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow.

Hey

I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory.

Code:

/* page defaults */
body {
	margin: 0px;
	padding: 0px;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #EAEAEA;
}

/* Layout divs */
#container {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	position: static;
	left: 40px;
	top: 12px;
	padding: 0px;
	width: 800px;
	border-right: #003366 1px solid;
	border-left: #003366 1px solid;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	text-align:left;
	background-color: #FFFFFF;
}
#title {
	background-image: url(images/saved_title.gif);
	margin-top: 10px;
	background-repeat: no-repeat;
	height: 150px;
	border-top-color: #000000;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: #000000;
}
#navbar {
	background-image: url(images/navbar.gif);
	background-repeat: no-repeat;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 5px;
	height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right: 1px solid black;
	padding: 5px;
	background-color: #CCCFFF;
	width: 230px;
	height: 100%;
	margin: 0;
	float: left;
	font-size: medium;
}
#content {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 10px;
	padding-top: 40px;
	background-image: url(images/content.gif);
	background-repeat: no-repeat;
	background-position: -239px 0px;
	background-color: #FFFFFF;
	height: auto;
	width: 539px;
}
#footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #CCCCCC;
	margin-bottom: 10px;
	padding: 10px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	width: 780px;
	height: 25px;
	text-align: center;
}

/* Links */
a:link {
	color: #006699;
}
a:visited {
	color: #006699;
}
a:hover {
	color: #006699;
	text-decoration: none;
}
a:active {
	color: #006699;
}

/* elements */
#navwin h2 {
	font-size: large;
	display: block;
}

#navwin ul {}

thanks

Matt

Please see:

http://www.larreamma.com/staff2.html

Is there a better way to expand 'main2' then adding/increasing the 'margin-bottom' of the last (empty) paragraph?

<p style="margin-bottom:150px">&nbsp;</p>

Without it the bottom floated image overlaps 'main2' and meets the footer. This was not an issue on the other pages of the site as the text extended beyond the floated image(s)/elements.


C'mon Kravvitz...

Hi -- I am trying to set up a really basic css layout, and it just isn't working out for me. All I want is for the page to be split down the middle, and a footer than spans the full width of the page.

Here's what I have:

CSS:

Code:

body {
				color: #FFFFFF;
				background-color: #000;
	}
		
#leftcontent{
				float:left;
				width:50%;
				border:0px;
				padding:0px;
				color:#FFFFFF;
				background-color:#000;
		}

#rightcontent{
				margin-left:50%;
				margin-right:0px;
				width:100%;
				border:0px;
				padding:0px;
				color: #000;
				background-color:#FFFFFF;
		}

#bottomcontent{
				float: bottom;
				margin-bottom:0px;
				width:100%;
				border:none;
				padding: 10px;
				position:fixed;
				bottom:0;
				background-color:#FBBF0D;
		}

HTML:

Code:

<html>
	<head>
		<title>Crap!</title>
		<link rel='stylesheet' href='css.css' type='text/css' />
	</head>
	
	<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0">
	
		<div id="leftcontent">

			<h1>A logo will go here</h1>
			
		</div>

		<div id="rightcontent">

			<h1>A navigational bar will go here</h1>
			<br clear ="all" />

		</div>

		<div id="bottomcontent">
		
			<center>
				<h1>Another logo will go here</h1>
			</center>

		</div>

It works in IE 5.2 for Mac, but not in Safari, so I know something is very wrong, but I can't figure out what. Please help!

Hello everybody, I present myself, I'm Alessandro a new member from Italy.
I found this forum very useful.
Hope to find good answers following topics and hope to help someone when I'm able to.
Ciaooooo

I have this issue for the moment:

I have a homepage layout with 3 columns with an images and captions inside everyone.
I have a subtitle also, and I want the subtitle extends orizzontally over the div without resizing it and without rollbars.

see a screenshot he http://www.alessandroboselli.it/foto/screenshot.jpg

and here is the involved CSS code:

Code:

/* Homepage layout --- start */
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 980px;
}

#side-left {
	float: left;
	width: 300px;
}

#center { 
	float: left;
	width: 300px;
}

#side-right {
	float: right;
	width: 380px;
}
/* Homepage layout --- end */


/* Homepage images --- start */
.homepageimage {
	position:relative;
	float:left; /* optional */	
	top:40px;
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f');
}
.homepageimage a {
	text-decoration: none;
	float: left;
}
.homepageimage a .homepageimagetitle {
	display: block;
	font-family: 'Molengo', Arial, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	letter-spacing: 0.050em;
	word-spacing: 0em;
	line-height: 1.2;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	margin: 0;
	width: 190px;
	/*position: absolute;
	right: 20px;
	bottom: 20px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}

.homepageimage a .homepageimagesub {
  	display: block;
 	font-family: 'Buda', serif;
 	font-size: 22px;
 	font-style: normal;
 	font-weight: 400;
 	text-shadow: none;
 	text-decoration: underline;
 	text-transform: none;
 	letter-spacing: 0.007em;
 	word-spacing: 0em;
 	line-height: 1.15;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 215px;
	left: 0px;
	padding: 5px;
	margin: 0;
}

I have this problem on and off in different web sites I have designed. Somehow I get around it, however, I really do not understand why I have the problem, and how I solve it.

here is the link:
http://mizuedesign.com/0000.html

in IE7, my #mainContainer extends as I put in some other divs etc. (there is a border around it.)

However in FF, Safari, and Opera the same DIV does not extend.

I am trying to achive the results I see in IE7.

Any help would be greatly appriciated.

S. Boztepe

Hi,

I like to know how to extend an existing class.

.footertext50per
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
}

.footertext50perleft
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
TEXT-ALIGN: left
}

As you see in the second class "footertext50perleft", the only difference with respect to the first class "footertext50per" is the 'text-align'. This lead to duplication of coded.

I like to know whether it is possible to extend "footertext50per" to "footertext50perleft" and just define the additions or modifications only.

Thanks.

I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance.

hxxp://adrian.briansykes.netau.net/

Hi All,


Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal!

Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic.

Now I have designed an overlay for my site:

http://www.wellandpower.net/website2/index.php

The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div.

The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF.

Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange.

CSS Code:
Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }

  

 #overlay {


      visibility: hidden;


      position: absolute;


      left: 0px;


      top: 0px;


      width:100%;


      height:100%;


      text-align: center;


      z-index: 1000;


      background-image:url(/images/checkerboard.png);


 }


 #overlay #overlayholder {


     margin-top: 50px;


     padding: 10px;


     width: 850px;


     text-align: center;


     background-color: #FFFFFF;      


 } 

Any help greatly appreciated.