CSS - Div's Not Stretching The Entire Height Of My Page

hello all,
On my website i allow my users to use a an editor such as tinyMCE to do a write up and I store the html in my database to display later.

the issue i have is how can i make sure that in the DIV where i'm displaying these writeups from the user doesn't stretch out.

for example if a user puts in the code "<font size=999>TEST</font>" in their article that they are posting to my site, i don't my whole site to go out of wack due to the large font size. i want it to stay the same and just wrap the text to the next line.

Thanks

For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site.

I'm using this html:

Code:

<div id="titlebox">
      <div id="title">
        <img src="images/title.png" alt="Garden Pub & Grille" />.
      </div>
</div>

with this css:
Code:

html, body {
  font-family: Century Gothic;
  text-align: center;
  background-color: #DEF9FA;
  height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  top: 0px;
  position: relative;
}

body > #container {
  height: auto;
  min-height: 100%;
  min-width: 100%;
}

#titlebox div  {
  background-color: black;
  position: absolute;
  min-width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  left: 0px;
  top: 0px;
  height: 64px;
  z-index: 1000;
}

#title div {
  width: 1000px;
  background-color: black;
}

Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks.

URL
Image doesn't seem to be showing up, link:
http://img15.imageshack.us/img15/5697/29946518.png

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.

example is at
http://bluewebpages.com/arch.php

I am fairly proficient at coding css and think it's about time to clean(organize) it all up, even though it does validate. Anyway I was wondering if someone could please help me with the overlap problem for the right (smaller) column. I want the entire main content of the page, the part before the footer, to extend down when there is more content to side, not just the left/main content side.


EDIT:
Fixed .. thanks! The `clear:both;` was what it needed

Hi all,
I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code:

Code:

<img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250">
 

this img tag was placed right after the <body> tag.

When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row!

Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help...


Any help would be appreciated..thanks..

Hello everybody!

I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS:

HTML (I only included the very basic structure):

<html>
<body>
<div class="container">
<div id="content">
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
</div>
</div>
</body>
</html>`

CSS:

html, body {
height: 100%;
font-family: Arial;
font-size: 10px;
color: #000000;
background: #FFF url(../../images/body.png) no-repeat center 40px;
margin: 0;
position: relative;}

.container {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}

#content {
width: 939px;
min-height: 100%;
position: relative;
top: 210px;
left: 6px;
box-shadow: 0px 0px 8px #666;
-moz-box-shadow: 0px 0px 8px #666;
-webkit-box-shadow: 0px 0px 8px #666;
background-color: #FFF;}

I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies?

Thank you so much in advance for your help.

If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help?

thx

dh

Does anyone know how to set the height so it's 100% of the page size? Setting "height: 100%" doesn't seem to work. Thanks!

#bottomLeft
{
position: absolute;
height: 100%;
padding: 0;
margin: 0;
width: 175px;
}

If you take a look here http://www.challengeyourdiet.com/login

you may notice that the page does not go all the way down on big screens. I would like my footer to automatically fall to the bottom of the page no matter what screen size someone has. Any ideas?

Thanks!

Hi guys,

I have a problem that really bugs me and I'm probably not seeing the super-easy simple solution that is certainly there.

s369533597(dot)onlinehome(dot)us

s369533597(dot)onlinehome(dot)us(slash)templates(slash)edison(slash)css(slash)template(dot)css

and art.sheet is the tag.

(site build on joomla 1.6)

If your browser window will show more than 900px in height you'll see immediately my problem. the "body content" area will resize to the window height and not to the amount of content in it leaving a lot of blank space depending on the browser window height. I've tried all the min-height and height options and combinations but nothing really works. If I'll set up a particular height for that tag it will be OK for the home page but on any other page the overflow look awful. I just can't make it fluid.

any advise?

Hi,

I'm working on my homepage at www.wecook.co.uk and want the grey background to at least be big enough to fill the whole page on most resoultions - currently on my monitor (1280 x 1024) it ends and i get a white at the bottom of the page - could someone suggest how i can adjust my css to fix this?

any help is appreciated.

thanks

Hey everyone,

I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks.

If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either.

I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid.

Any ideas?

HTML4Strict Code:
Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>

  

  


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


  


 <html>


 <head>


     <style>


 body{


     width:100%;


     height:100%;


     padding:0;


     margin:0;


     color:#ffffff;


     background-color:#000000;


 }


 object{


     float:left;


     clear:both;


     width:80%;


     height:100%;


     background-color:#cccccc;


 }


 .section{


     float:left;


     clear:none;


     width:48%;


     height:48%;


     margin:1%;


     background-color:#333333;


     display:block;


     position:relative;


 }


 .panel{


     float:left;


     clear:none;


     width: 16%;


     height:96%;


     margin:2% 2%;


     background-color:#cccccc;


     


 }


 #container{


     float:left;


     clear:both;


     width:100%;


     height:100%;


     min-height:100%;


     background


 }


     </style>


 </head>


 <body>


     <div id="container">


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


     </div>


 </body>


 </html> 

Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database.

Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php

thanks
-Sean

Greets,

I'm trying to get the follwing collumns to display on the complete height of the element they are nested in.

Each of the 3 collumns currently only take the space required by the content that is in said element.

Preview:


The current layout is set with 3 divs (2 left floating, and the bigger one on right-float). I don't want to use tables/cells and I cannot use min-height as the content will be filled by the customer using a CMS.

I Wish i could use something like:
Code:

#col_1 {height: parent.height;}

here is a link to the actual page, please note that to use the style i am talking about you will have to use the top left select element and choose GH_02 -v. (this is my 1st attempt to have the same content with multiple css sets...)