|
CSS - The Old Column Stretch And Footer Bottom Problem
I've spent the last two days struggling, trying to get the footer to stay at the bottom of the window and the two right most columns in my layout to stretch to the footer. I've search this site thorough for answers, and yes, there were many of them. But still, after implementing everyone I came across, I can't get the layout to do the above criteria in both IE and Firefox.
HTML Code: <!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> <title>Mall</title> <link href="css/template.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="main"> <div id="header"> <div id="ecommerce"> <div id="logo"><img src="images/logo.jpg" width="188" height="18" alt="Mall" title="Mall" border="0" /></div> <div id="text"><a href=""><img src="images/cart.gif" width="16" height="16" alt="Master Basket" title="Master Basket" border="0" /> Basket</a> | <a href="">Register</a> | <a href="">Login</a></div> </div> <div id="content"> <div id="searchform"> <form> <fieldset> <legend>Search Shopping Mall</legend> <div id="search_btn"><input type="submit" value="Search" class="button" /></div> <div id="search_type"> <select> <option>Products</option> <option selected="selected">Stores</option> </select> </div> <div id="search_input"><input type="text" name="query" id="query" value="" size="22" maxlength="200" /></div> </fieldset> </form> </div> <!-- end searchform --> </div> <!-- end content --> </div> <!-- end header --> <div id="mall"> <!-- top navigation --> <div id="topnav"> <div id="nav-container"> <ul id="nav"> <li id="nav-home"><a href="index.html" accesskey="1">Home</a></li> <li id="nav-browse"><a href="browse.html" accesskey="2">Browse Mall</a></li> <li id="nav-getastore"><a href="getastore.html" accesskey="3">Get A Store</a></li> <li id="nav-featstore"><a href="featstore.html" accesskey="4">Featured Store</a></li> <li id="nav-featitem"><a href="featitem.html" accesskey="5">Featured Item</a></li> <li id="nav-aboutus"><a href="aboutus.html" accesskey="6">About Us</a></li> <li id="nav-contactus"><a href="contactus.html" accesskey="7">Contact Us</a></li> <li id="nav-help"><a href="help.html" accesskey="8">Help</a></li> </ul> </div> </div> <!--<div id="topnav"> <div id="menu"><a href="index.html">Home</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Browse Mall</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Get A Store</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Featured Stores</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Featured Items</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">About Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Contact Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Help</a></div> </div>--> <!-- banner image --> <div id="banner"><img src="images/banner.jpg" width="764" height="150" alt="Welcome to the Mall!" title="Welcome to the Mall!" border="0" /></div> <div id="midspacer"></div> <div id="mallbody"> <!-- left navigation --> <div id="leftnav"> <div class="menu_topleftcorner"><img src="images/menu_topleftcorner.jpg" width="6" height="6" border="0" /></div> <br/> <div class="sections">Mall Categories</div> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</a></li> <li><a href="">Books, Music & Movies</a></li> <li><a href="">Clothing & Apparel</a></li> </ul> </div> <br/> <div class="sections">Shop by Store</div> <ul id="navlist"> <li id="active"><a href="#">Salsa Products</a></li> </ul> <div class="menusp"></div> <div class="menu_bottomleftcorner"><img src="images/menu_bottomleftcorner.jpg" width="6" height="6" border="0" /></div> </div> <!-- content --> <div id="content"> <p><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/></p> </div> <!-- right navigation --> <div id="rightnav"> <p></p> </div> </div> </div> <!-- end mall --> </div> <!-- end main --> </div> <!-- end wrapper --> <div id="footer"> <div id="bg"> ads ad ad a </div> <div id="compliant"> <a href="http://validator.org/check/referer" target="_blank"><img src="images/compliant/w3cxhtml10.png" width="80" height="15" alt="W3C XHTML 1.0 Validated" title="W3C XHTML 1.0 Validated" border="0" /></a> <a href="http://jigsaw.w3.org/check/referer" target="_blank"><img src="images/compliant/w3ccss.png" width="80" height="15" alt="W3C CSS 1.0 Validated" title="W3C CSS 1.0 Validated" border="0" /></a> <a href="http://www.mozilla.org" target="_blank"><img src="images/compliant/mozilla.png" width="80" height="15" alt="Mozilla Firefox Browser Compatible" title="Mozilla Firefox Browser Compatible" border="0" /></a> </div> </div> <!-- end footer --> </body> </html> PS - Kravitz, I've check alot of the links you have posted. While they were helpful, I wasn't successful in implemented many of the techniques suggested in them to solve my problems. Similar TutorialsI'm attempting to get it so when the main content div exceeds my min-height specifications, that it expands the div, which in turn expands the container with an absolutely positioned footer at bottom:0;. Works fine in all newer browsers with the exception of IE7. What do I need to do to get it to expand in that version? Here is the link to the page: http://www.chcs-ut.com/chcs-new.php And the stylesheet: http://www.chcs-ut.com/css/style.css Also, I would really rather not have to specify a min-height for my main content div. I'd rather just have it automatically fill to 100% of the main container that is set to 100% height and min-height, so that the footer automatically appears at the bottom of the screen if the content is not large enough to push it down there by itself. Can't seem to get it to work, though (in ANY browser) without specifying a min-height for the main content div. Problem with that is different resolutions/browsers would require a different value, so hard-coding it isn't a desireable solution. Any thoughts? EDIT: Both problems were fixed by adding "height:auto !important" to my main content container, instead of specifying a "min-height". Works across the board! Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks. Code: * {
margin:0 auto;
padding:0;
}
h2 {
font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
color:#8B9F86;
}
h3 {
font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
color:#845697;
}
a {
color:#4C53E0;
}
a:focus, a:hover, a:active {
color:#EB8518;
}
body {
background:#000000 url(images/body2.jpg);
background-repeat:repeat;
background-position:top left;
font-size:90%;
margin:0 auto;
padding: 24px 0;
}
#outer {
margin:0 auto;
width:80%;
min-width:40em;
max-width:70em;
border:10px solid #EEEEEE;
border-width:0 5px;
background:#EEEEEE;
}
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
content:".";
display:block;
visibility:hidden;
clear:both;
height:0;
}
* html #nav, * html #content, * html form, * html form div {
height:1%;
}
ul#access, .off {
position:absolute;
left:-1000em;
top:-1000em;
}
hr {display:none}
#header {
background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
padding-left:.6em;
font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
letter-spacing:1pt;
color:#FFFFFF;
background: transparent url(images/banner2.jpg) no-repeat right bottom;
}
#header h1 a {
color:#FFFFFF;
text-decoration:none;
}
ul#nav {
list-style:none;
margin:3px 0 1em;
text-align:center;
background:#FFFFFF;
border-top:2px solid #444444;
border-bottom:2px solid #444444;
}
#nav li {
list-style:none;
margin:0 auto;
width:94%;
min-width:40em;
max-width:70em;
display:block;
text-align:center;
background:#000000;
}
* html #nav li {
width:24.9%;
}
#nav a {
display:block;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
text-decoration:none;
color:#444444;
margin:1px;
background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
border:1px inset #8B9F86;
margin:0;
color:#EB8518;
text-decoration:underline;
}
ul#nav li#active {
background:#FFFFFF;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
color:#000000;
text-decoration:underline;
}
#sub, #right {
font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
word-spacing:.1em;
margin-bottom:1em;
}
#sub {
width:74%;
float:left;
position:relative;
}
#center {
width:65%;
float:right;
}
#left {
width:33%;
float:left;
}
#right {
width:25%;
float:right;
}
#center p {
margin:.5em 2% .5em 0;
}
img.img-right {
float:right;
}
#left h2 {
color:#845697;
font-size:1.5em;
}
#left p {
font-size:.9em;
}
#right {
font-size:.9em;
}
#right h2 {
font-size:1.2em;
}
/** Footer **/
#footer {
clear:both;
margin-top:1em;
font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
border-top:3px double #C8DCC2;
}
#footer p {
margin:1em 1em 1em 0;
text-align:center;
padding: 21px 0;
}
#footer ul {
list-style:none;
margin-top:.7em;
}
#footer li {
display:inline;
border-right: 1px solid #C8DCC2;
padding:.3em 2%;
}
Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hi! My first post I got a problem with my sticky footer as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll The site: www dot flyttamig dot com think the problem is that i put 100% height on html html, body { margin:0; padding:0; height:100%; } Can you guys help me get rid of this scroll Thanks I am presently creating a website for a friend of mine who's a model and wants her own website, I have decided to make it using xhtml and css. The problem that I am having is that I would like to have a footer which is at the very end of the page no matter how much content there is to the page. I have uploaded the code to here When this page is viewed in IE the footer is displayed at the bottom of the screen although the content carries on after the footer. When this page is viewed in Firefox the footer is displayed just below the bottom of the screen although again the content carries on after the footer. I have Googled this and tried out a couple of the suggested ways of getting the page to work and it just doesn't appear to want to work, so I am obviously doing something wrong :s Does anyone have any idea how I would be able to get the footer to stay at the very bottom of the webpage? Also if you look at the website you will see that the navigation sidebar only goes down as far as its content, I would prefer it if the sidebar went down to the footer (which will hopefully be at the bottom of the webpage). Again does anyone have any idea how I would be able to get it to do this. Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan hi all, right have got a problem which has been bugging me for days now. i have 4 columns in a row (inside a wapper div)which all will have different content image, text other divs/classes etc. now one of these columns will be quite fluid as it will have different text on each page meaning it will be quite long on some pages not on others. the problem i am getting is in the good browsers firefox etc its ok in IE6+. the wapper does'nt seem to see the divs in the content meaning it does not get filled, meaning that the footer flys to the top and not where it should be, i dont have a live version but heres the code: mainly thanks Dan <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #con { width:940px; height:400px; background-color:#00FFFF; } #wapper { width:940px; background-color:#006666; } #box { width:940px; background-color:#000033; height:40px; } #menu-pronuptia { width:185px; background-color:#6633CC; float:left; display:inline; } #menu-pronuptia1 { width:185px; background-color:#009900; display:inline; float:left; } #menu-pronuptia2 { width:385px; background-color:#0033CC; display:inline; float:left; clear:inherit; } #menu-pronuptia3 { width:185px; background-color:#CCCC33; display:inline; float:left; } --> </style> </head> <body> <div id="wapper"> <div id="menu-pronuptia"> <p>test</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="menu-pronuptia1"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="menu-pronuptia2"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="menu-pronuptia3"> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div id="box"> <p><br /> </div> </body> </html> Hi there, my first post here. I'm working on my first site using CSS for layout. I have a footer as a div that I want to be the last thing on the page, doesn't need to stick to the bottom or anything. It's obeying on my other pages, but on this index page I can't figure out why its not going to the bottom. the site is at w w w. montrosemusicseries com / indextest html I'm assuming its some kind of float thing that's not clearing, but I have my <br style="clear:both"/> in there. I also tried a div clear to no avail. Any suggestions? Thanks, Stuart Ok, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out. Here's the code: Code:
<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--CSS-->
<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
<title> MY TITLE GOES HERE! </title>
</head>
<body>
<div id="container">
<div id="nav_container">
MY MENU STUFF GOES HERE!
</div>
<div id="content">
<div id="left_column">
BLAH BLAH all my content goes here!
</div>
<div id="right_column">
ALL OF MY RIGHT CONTENT HERE!
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
and this is the stylesheet driving the page: Code:
body {
background-image: url("gfx/bg.jpg");
background-repeat: repeat-y;
background-position: center;
background-color: #FFFFFF;
margin: 0px;
font-family: Tahoma;
font-size: 13px;
}
/*Page Structure --------------------------------------*/
#container {
background-color: #FFFFFF;
position: absolute;
left: 50%;
margin-left: -394px;
width: 790px;
height: 100%;
border: 1px solid Black;
border-top: 0px;
border-bottom: 0px;
}
#content {
background-color: #FFFFFF;
width: 790px;
float: left;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#left_column {
width: 390px;
float: left;
display: inline;
margin: 15px 0 0 20px;
padding: 0px 0px 15% 4px;
border-right: 1px solid #DFDFDF;
}
#right_column {
width: 326px;
float: left;
margin: 15px 0 0 0px;
padding-bottom: 10%
}
/*Headers and Flash content -----------------------------*/
#header {
background-image: url("gfx/header.jpg");
width: 790px;
height: 101px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#home_header {
background-image: url("gfx/home_header.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 380px;
height: 150px;
margin: 0px 0 10px 0px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#recent_posts {
background-image: url("gfx/recent_posts.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin-left: 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#latest_threats {
background-image: url("gfx/latest_threats.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#recommended_sites {
background-image: url("gfx/recommended_sites.jpg");
background-repeat: no-repeat;
width: 215px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#flash {
background-color: #000000;
width: 790px;
height: 120px;
float: left;
vertical-align: middle;
}
/*Navigation --------------------------*/
#nav_container {
background-image: url("gfx/nav_bg.jpg");
background-color: #FFFFFF;
width: 790px;
height: 24px;
float: left;
text-align: right;
}
/*News Structure --------------------------*/
#news_header {
background-color: #FFFFFF;
width: 390px;
height: auto;
float: left;
font-size: large;
font-weight: bold;
color: #009AFF;
margin: 3px 0 2px 0;
}
#news_post {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
color: Gray;
margin: 0px;
}
#news_date {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
font-size: 11px;
font-style: italic;
color: Gray;
margin-left: 5px;
}
#news_content {
background-color: #FFFFFF;
width: 390px;
float: left;
margin-top: 20px;
}
/*Lists----------------------------------*/
#post_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#post_list li {
background-color: transparent;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
#threats_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#threats_list li {
background-color: transparent;
list-style-image: url("gfx/red_arrow2.jpg");
list-style-position: inside;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
/*Footer--------------------------------------------------*/
#footer {
background-image: url("gfx/footer.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 790px;
height: 125px;
float: left;
margin-top: 40px;
}
Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this Thanks in advance, AA. I created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? I believe this has been asked before, but I'm unsure what search terms to use... Basic one column CSS layout. How to keep the footer at the bottom of the window even when content doesn't reach that far? I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content. I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3 http://www.themaninblue.com/writing/perspective/2005/08/29/ but I'm having a hard time with the longer content page. Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php Long page: http://windrivers-gsp.com/WRK/hclub.php or http://windrivers-gsp.com/WRK/dams.php As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div. I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated! Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed. Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! Hey I am relativly new to CSS and i was wondering how can i make the footer of my page stick to the bottom of the screen if the page is relativly short. I use a 800x600 as my design size but there might be long and short pages. Can anyone shed some light? Here is my code PHP Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" title="Disabled for Preview-in-Browser: ../css/basics.css" type="text/css" /> <style type="text/css"> <!-- /* CSS Document */ body{ background-color:#FFFFFF; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0px; padding:0px; font-size:80%; text-align:center; } #wrapper{ width: 750px; background-color:#FFFFFF; margin: 10px auto; text-align: left; } /* ---------------------------------Header content---------------------------------------------*/ #header { height: 150px; border-bottom: 1px solid #CC0000; } /*this is to make sure al content apears below the header*/ .clearit{ clear: both; display: block; } /*---------------------------------Main Contant------------------------------------------------*/ #content { background-color:#FFFFFF; margin-left:177px; margin-top:25px; margin-right:100px; } #content p{ background-color:#FFFFFF; } #content h1{ font-size: 140%; color: #CC0000; padding: 0; margin-bottom:20px; font-weight:bold; } #content h2{ font-size: 110%; color: #CC0000; padding: 0; margin-top:30px; } #content li{ color:#000000; list-style-position:inside; list-style-type:disc; } #content form h3{ font-size: 100%; color: #CC0000; padding: 0; margin:0; } #content form h2{ font-size: 115%; color: #CC0000; padding: 0; text-transform:uppercase; } .BoldRed{ color:#CC0000; font-weight:bold; } .verse{ color:#006699; font-style:italic; } /*use for commendattions names*/ .greyed { color:#666666; font-style:italic; } .leftimage{ float: left; margin-right: 10px; margin-bottom:10px; border: 1px solid #000000; clear:left; } .container{ width:99%; float:right; } /*-------------------------------Left Collum Content---------------------------------------------*/ #leftcol { font-size:100%; margin-top:30px; float:left; width: 167px; background-color: #FFFFFF; } /*------------------------------Footer Content---------------------------------------------------*/ #footer{ margin-top:30px; border-top: 1px solid #CC0000; background-color: #FFFFFF; color: #000000; clear: both; } --> </style> </head> <body> <!-- Start wrapper --> <div id="wrapper"> <!-- Start of Header --> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150"> <param name="movie" value="../homepageFlashElements/header.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed> </object> <!-- Clear a line--> <div class="clearit"> </div> </div> <!-- End of Header --> <!-- Start of Left Colum --> <div id="leftcol"> <div align="left"><img src="../images/courses/colours_08.jpg" width="143" height="143" border="1px"/></div> <p> Navigation content here </p> <p></p> </div> <!-- End of Left Colum --> <!-- Start of Content --> <div id="content"> <h1>Heading</h1> <p>Some Content. This may very in length</p> </div> <!-- End of Content --> <!-- Start of Footer --> <div id="footer"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="50"> <param name="movie" value="../homepageFlashElements/footer.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/footer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="50"></embed> </object> </div> <!-- End of Footer --> </div> <!-- End wrapper --> </body> </html> I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar. Does anybody know how to do this? Any help would be appreciated. Thank you! http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. |
|||||||