Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 10th, 2009, 04:30 PM
Friend of Wrox
 
Join Date: Sep 2003
Location: Mentiri, Muara, Brunei.
Posts: 363
Thanks: 0
Thanked 0 Times in 0 Posts
Default Page layout problem

Hi,

I am designing a page which has header, conainer(3 columns) and footer.
Header is ok. container(body) is displaying 3 columns. But the footer is displaying just below the body. Its fair when the body content is large. If the body content is less, footer coming to middle of the screen. I want to display the footer at the bottom only.

I have put container div wit height as 100% but its not applying. If I give in pixels, it is fair. But I want to give in % coz to fit in any resolution.

My css is as below

body
{
margin:0; font-family:Arial,verdana, helvetica Sans-Serif; font-size:78%;
}

#container
{
width:99%; margin:1px; border:1px solid gray; background-color:#D3D3D3; height:320px;
}

#leftcol
{
background-color:#ffF; font-size:10px; height:100%;
border-style:solid; border-width:1px; border-color:#c0c0c0;
float:left; width:14%; padding:1em; padding-top:2px; margin-top:2px;
}

#centercol
{
background-color:#FFFFFF; width:69%; float:left; padding-left:2px; padding-top:2px; height:100%;
border-style:solid; border-width:1px; border-color:#D3D3D3; margin-left:2px; margin-top:2px;
}

#centercolcontent
{
padding:15px 6px 15px 6px;
}

#rightcol
{
font-size:10px; color:#000; background-color:#fff; height:100%;
width:14%; float:right; border:1px solid gray; padding-top:2px; margin-top:2px;
}


#header
{
padding:0; margin:2; width:100%; height:120px;

}

#header2
{
padding:0; margin:0; width:99%; height:120px; padding-top:8px; border-style:solid; border-width:0px;
}

#headermenu
{
position:absolute; top:93px; left:1px; width:99%; padding:1px;
background-color:#FFFFFF; height:25px; vertical-align:middle; text-align:center;
border-color:#00BFFF; border-width:1px; border-style:solid;
}

#innerMenu
{
margin-left:20%; background-color:#FFFFFF; height:25px; padding-top:0px; text-align:center;
}

#breadcrumb
{
background-color:#202020; color:#FFFFFF; padding:3px; font-size:10px;
}

#footermenu
{
text-align:center; padding-top:10px;
}

#footer
{
padding:0px; width:100%; height:62px; background-color:#FFFF00; clear:both; margin-bottom:5px;
}

.footermenulink
{
font-family:Arial; font-size:10px; font-weight:bold;
}

#footertext
{
text-align:center; padding-top:10px;
}

.headermenulink
{
font-family:Arial; font-size:11px; font-weight:bold; text-align:center;
}
Reply With Quote
  #2 (permalink)  
Old February 12th, 2009, 03:56 PM
Authorized User
 
Join Date: Dec 2008
Location: London
Posts: 50
Thanks: 1
Thanked 5 Times in 5 Posts
Default

you can use following

min-height:500px; now your div tag will not be less then 500px cool but this does not works in IE

for IE use

height:expression(this.height<500?"500px":this.hei ght);

i hope this resolves your problem

thanks
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Opening page layout... photon BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 1 October 7th, 2008 05:22 PM
page layout breaks in IE 6 & 7 Cyber Shiva CSS Cascading Style Sheets 0 July 5th, 2008 10:19 AM
Page layout n specifications for Thermal printer XSLTUser XSLT 0 December 26th, 2007 05:49 PM
Page Layout without tables atcs2152 CSS Cascading Style Sheets 4 December 16th, 2005 10:30 AM
Page Layout Problem Spades Dreamweaver (all versions) 1 December 2nd, 2004 04:55 PM



All times are GMT -4. The time now is 05:47 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.