100% height and footer at bottom

4 New Member

Hello All,

I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution:

HTML CODE:[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet " href="styleshee ts/styleinnertest. css" type="text/css"/>

</head>
<body>
<div id="maincontain er">
<div id="topcontaine r">
<div id="navcontaine r">
<div id="nav">
</div>
</div>
</div>
<div id="videocontai ner"></div>
<div class="containe r">
<div id="lefttcontai ner"></div>
<div id="contentbox" >
<div class="text"></div>
</div>
</div>
<div class="credits" id="footer">zx, c,c,zxc,zx,czx, c,zcz</div>
</div>
</body>
<html>[/html]

And this is the CSS CODE:

Expand|Select|Wrap|Line Numbers

 
html, body{height:100%;} 

html,body {margin:0;padding:0; background-color:#000;}

#maincontainer

{

    background:url(../images/bg.gif);

    height:100%;

    width:975px;

    margin-left:auto;

    margin-right:auto;

    position:relative;

    z-index:4;

}

#topcontainer

{

    background:url(../images/navbg.gif) no-repeat;

    position:relative;

    width:968px;

    height:116px;

    padding:0;

    left:3px;

    top:-8px;

    z-index:3;

}
 
#navcontainer{

    position: relative;

    width: 968px;

    height: 33px;

    padding: 0;

    margin: 0 0 10px 0;

    z-index:2;

}

#videocontainer

{

background:#ffffff;

position:relative;

width:968px;

height:238px;

padding:0;

left:3px;

top:-4px;

z-index:0;

}

.container

{

height:100%; /* IE6: treaded as min-height*/

min-height:100%; /* real browsers */

background:url(../images/bg.gif);

padding-bottom:25px;

}
 
#contentbox

{

    background:#FFFFFF;

    position:relative;

    float:left;

    width:713px;

    height:100%;

    padding:0;

    left:2px;

    top:0px;

}

.text

{

    position:relative;

    float:right;

    width:700px;

    height:auto;

    padding:0;

    top:270px;

    right:3px;

    font-family:Arial;

    color:#666666;

    font-size: 75%;

    font-weight:normal;

}
 
#lefttcontainer

{

background:url(../images/home_leftnavtop.gif) top no-repeat;

background-color:#FFFFFF;

position:relative;

width:250px;

height:100%;

float:left;

top:-3px;

margin:3px;

}
 
#footer

{

    background:#000000;

    position:absolute;

    bottom:0;

    width:100%;

    height:25px;   /* Height of the footer */

    margin-left:auto;

    margin-right:auto;

    border-top: thin #333333 solid;

    border-bottom: thin #333333 solid;

}

Nov 15 '07 #1

Subscribe Reply

1914

Similar topics

14395

Tables VS. CSS (Footer at the bottom, 100% of the viewport)

by: Tyler Carver | last post by:

I've tried to get CSS to give me a basic layout where I can place a footer at the bottom of the page and the top of the page I can use for content. I don't however want the footer to pull away from the bottom of the viewport if the top content is small. Also, when I resize the window I want the footer to move with the bottom of the page until I reach the content. Here is an example that works both in IE and Mozilla using tables. I...

HTML / CSS

5045

Liquid layout with 100% height scrollable container

by: SebiF | last post by:

Hello, It might have been asked before but since I could not find a reference here's my qustion: I want a liquid layout similar to this one: http://www.alistapart.com/d/negativemargins/ex5.htm but with the footer fixed at the bottom and the content in a scrollable area.

HTML / CSS

2162

how to create table height 100% ?

by: Markus Olderdissen | last post by:

i want to create my page with 100% height. <table height="100%"works but is not correct by default. i saw various information how to do it with stylesheet. i really have problems to create my page. i want to have header on top and footer on bottom. content should be on top of the middle part. i always got scrollbars, even if my page isn't too large. perhaps, someone can show me to do it right. the following code describes my wish. ...

HTML / CSS

7333

Adjust height base on the the height of the browser window.

by: Q. John Chen | last post by:

I have a page contains a table (e.g a 3-row table). The middle row is for the content and the bottom row is for footer notes. When the middle row does not have much info, the footer goes way too high up. How can I automatically adjust the height of the middle row when a user re-size the browser window. Or, how can specify a minimum height so at least the footer is a footer?

HTML / CSS

6488

Height at 100% Not Working

by: Mike Collins | last post by:

I am trying to create some pages and have them take 100% of the window, but I cannot get 100% to work. If I set the height of my div, the page displays a scroll bar and it looks like I set the height to about 150%. I tried using CSS, now I am trying tables. Can someone show me where I am mixing things up? Thanks. --Master Sheet <%@ Master Language="C#" AutoEventWireup="true" CodeFile="master.master.cs" Inherits="pts" %>

ASP.NET

3192

100% header and 100%footer image

by: darkzone | last post by:

Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost there for white but the footer image could now be viewed. ?= <!DOCTYPE HTML PUBLIC...

HTML / CSS

3600

fill the parent window height using 100%

by: soms2m | last post by:

HELLO ALL, I want to fill the parent window height with respect to the sub window height which is loading using ajax (mootools). For example if the parent window height is normal and the loading child window height is 1200px (saying), when the child window load the height of the parent window changs but the backgorund color which is given 100% not fill the parent window. I have given my example codes, please give a solution as soon as...

Javascript

2197

Force constant height of details section

by: peter.c.bradley | last post by:

Hi folks, I have an Access report that has an unbound text box in the details section. The report also includes the standard headers and footers. The details section is populated by a query executed during the “Report_Open” event. Depending on the query, the details section can have 1 or more records and each record is a text string of variable length (the text box is set to grow). I’m trying to create the effect of a constant size...

Microsoft Access / VBA

1578

100% not working

by: adamjblakey | last post by:

Hi, Right i have just built a site which has 3 divs align to the left and in the outer 2 divs i have a background which i want to be a 100% so when the middle stretches so do the outer 2 but it does not happen. Please can you have a look at my code: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...

HTML / CSS

9643

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10315

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10147

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10085

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9947

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6737

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5511

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4045

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2877

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General