|
CSS - Content Div Expanding Behind Footer Div
Hey gang,
I'm sure this has been asked many times, but i cannot find the words to search for this. Luckily, I'm sure it is a quick fix. I'm not great with CSS, but I feel I have a strong understanding. However, I must not completely understand divs, because when I try to add padding to this "right content" div, it pushes itself behind the footer div (the bright green box): The box on the left is the "left-content", the box on the right is "right-content." Each of the boxes are floated left and right, respectively, and they are both in a "container" div that centers them. How can I make the footer div just be pushed down with content is added to either the right/left-content div? I can add a bunch of "<br />s after the last bit of content, and the footer moves down, but I feel it is cleaner to just add 20x padding. Any help is greatly appreciated! Similar TutorialsOK, the site looks great in all browsers, Mac and PC. But on an iphone, the footer background does not expand the width of the screen. I don't know why. Here is the site here Does anyone know how to make this work on an iphone? thanks Hello, I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide. This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar. Any idea how I can make the box expand with my content? here is a link to my test page. http://www.gamerunion.com/test.html My css code. Code:
div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}
HTML Code:
<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
<div id="tlcorner"><span>top left corner</span></div>
<div id="trcorner"><span>top right corner</span></div>
<div id="blcorner"><span>bottom left corner</span></div>
<div id="brcorner"><span>bottom right corner</span></div>
<div id="tptile"><span>top side tile</span></div>
<div id="lftile"><span>left side tile</span></div>
<div id="rttile"><span>right side tile</span></div>
<div id="btmtile"><span>bottom side tile</span></div>
<div class="content">
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<h1>Gamerunion</h1>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
</div>
</div>
</body>
You can see the problem he BrianRoyer.com The google adsense ad is expanding past the container. Here is my style.css for troubleshooting: Code: html, body {
background: #a0a0a0 url(images/main_bg.gif) center top repeat-x;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
#container {
width: 703px;
margin: 0 auto;
background: #068add url('images/content_bg.gif');
border-left: 5px solid #cdcdcd;
border-right: 5px solid #cdcdcd;
border-bottom: 5px solid #cdcdcd;
}
#content em.u {
text-decoration: underline;
font-style: normal;
}
#top {
padding: 0;
border: 0;
}
#top img {
border: 0;
}
#top h1 {
padding: 0;
margin: 0;
}
#leftnav {
float: left;
width: 160px;
margin: 0;
padding: .25em 0 0 .75em;
}
#rightnav {
float: right;
width: 125px;
margin: 0;
text-align: center;
padding: 1em 1em 0 0;
}
#rightnav img {
margin: 0;
border: 0;
text-align: center;
padding: 1em 0 0 0;
}
#content {
margin-left: 200px;
margin-right: 200px;
padding: 1em 0 0 0;
width: 290px;
}
#content img.left {
margin: 5px;
border: 1px solid #000000;
float: left;
}
#content img.right {
margin: 5px;
border: 1px solid #000000;
float: right;
}
#leftnav img {
margin: 0;
border: 0;
}
#google-search img {
border: 0;
padding: 1em;
}
#footer {
width: 699px;
padding-top: 1em;
margin: 0 auto;
background: #068add url(images/footer_bg.gif) center bottom repeat-x;
}
#leftnav p, #content p {
margin: 0 0 1em 0;
text-align: justify;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
line-height: 130%;
}
#rightnav p {
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 10px;
}
#leftnav hr, #content hr, #rightnav hr {
color: #FFFFFF;
height: 1px;
}
#content h2 {
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h2.center {
text-align: center;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#leftnav h2, #rightnav h2 {
text-align: center;
margin: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h6, #leftnav h6, #rightnav h6 {
text-align: center;
margin: 0;
padding: 1em;
color: #FFFFFF;
font-family: Verdana;
font-size: 8px;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
padding: 0 0 0 1.25em;
margin: 0;
}
#navcontainer ul li a
{
background: transparent url(images/list_off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 10px Verdana;
text-decoration: none;
color: #FFF;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list_on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list_active.gif) left center no-repeat;
color: #666;
}
And here is snippet of code where the adsense ad is located: Code: <div id="container">
<div id="top">
<? include("ssi/header.inc"); ?>
</div>
<div id="leftnav">
<? include("ssi/leftnav.inc"); ?>
</div>
<div id="rightnav">
<? include("ssi/rightnav.inc"); ?>
</div>
<div id="content">
ad = rightnav.inc I have started creating a new DIV layout for my website but can't seem to get it to function correctly. I finally got the DIVs to expand with whatever content is in them, but now they will only span to the height of the window and hide the rest of the content instead of expanding further and just making the IE window scroll. Maybe one of you guys can help me out? Here is the test page: well apparently I can't post the url, so I guess I'll just "say" it. juicyart dot net / test.html Hi, I'm working on a website with a header and footer. I want the footer to sit at the bottom of the page even when the content is shorter than the page. I got that to work but can't seem to get the content div to stretch to meet the footer. The background color is different so I need it to stretch down the page. The website is here http://www.tcglv.com/3dgweb/index2.html Here's the css... I'd appreciate it if anyone can see what i'm missing here... Code: * {
padding:0;
margin:0;
}
html,body {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
background-image:url(../images/gradient.jpg);
background-attachment: fixed;
color:#4F4F4F;
margin:0;
padding:0;
height:100%;
}
a {
color: #0A2A57; text-decoration:none;
}
a:visited {
color: #000; text-decoration:none;
}
a:active, a:focus { border-style: none; text-decoration:none; }
#wrapper {
background-image: url(../images/gradient_interior.jpg);
width: 955px;
text-align:center;
margin: 0 auto -88px;
position:relative;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
background-image: url(../images/header.png);
background-repeat:no-repeat;
width:907px;
height:215px;
margin:0 auto;
font-size:0.85em;
color:#ffffff;
text-align:right;
}
#header_interior.interior {
margin-top:27px;
}
#header.interior {
height:136px;
}
#header ul {
padding-top:2px;
}
#header li {
display:inline;
padding-left: 10px;
padding-right:15px;
background: url(../images/bullet.jpg) no-repeat left center;
}
#header li.end {
padding-right:36px;
}
#header a:link, #header a:visited, #header a:active {
color:#ffffff;
text-decoration:none;
font-weight:normal;
}
#header a:hover {
text-decoration:underline;
}
#header_interior {
float:left;
text-align:left;
height: 210px;
position: absolute;
left: auto;
top: 0;
}
#logo {
float:left;
position: relative;
z-index: 10;
}
#topnav {
padding-top:5px;
position: relative;
z-index: 10;
float: right;
left: auto;
}
#main {
width:901px;
background-image:url(../images/main_back.png);
background-repeat:repeat-y;
background-position:left;
margin:0 auto;
padding-left:4px;
padding-right:3px;
}
#main_interior, #main_interior2 {
background-image:url(../images/gradient_grey.jpg);
background-color: #fff;
background-repeat: repeat-x;
text-align:left;
padding:25px 25px 25px 25px;
background-position: left -20px;
}
#menu {
width:908px;
background-image:url(../images/menu_back.png);
background-position:left;
margin:auto;
text-align: center;
}
#menu a { margin-left: -4px; }
#footer a {
color:#4F4F4F;
text-decoration:none;
font-weight:normal;
}
#content {
padding-bottom:98px;
}
#logos {
text-align:center;
}
#footer {
width:843px;
height:73px;
background-image:url(../images/footer_back.png);
background-repeat:no-repeat;
margin:0 auto;
text-align:left;
padding:15px 30px 30px;
color:#6D6D6D;
font-size:0.8em;
position:absolute;
bottom:0;
left:20px;
}
#footer a {
color:#888888;
}
#footer ul {
list-style: none;
margin-bottom:7px;
}
#footer li {
display:inline;
background-image:url(../images/border.jpg);
background-position:right 3px;
background-repeat:no-repeat;
padding-right:18px;
margin-right:17px;
}
#footer li.end {
padding: 0;
margin:0;
background-image:url(../blank.gif);
}
#iii {
float:right;
margin-right:-20px;
padding-top:12px;
height:30px;
}
.learn {
margin-top:30px;
}
.padding {
margin-right:50px;
}
.padding_2 {
padding-right:15px;
}
.padding_3 {
padding-bottom:16px;
}
.padding_4 {
padding-top:10px;
padding-bottom:10px;
}
.padding_5 {
padding-top:10px;
padding-bottom:5px;
}
.clear {
clear:both;
height:0;
}
p { margin-bottom:15px;margin-top:15px; }
h1 {font-size:16px;}
.topnavul {
float: left;
margin-left: 195px;
width: 250px;
}
.style3 {font-size: 12px}
.style5 {
font-size: 16px;
color: #FF0000;
font-weight: bold;
}
body,td,th {
font-size: 0.8em;
}
Hi All, I have the following layout. The problem I am having is when the "center" div has lots of text in it the text expands out of the "center" div. I would like the div to stretch with the content. Code: <div id="main"> <div id="mainTop"></div> <div id="mainContent"> <div id="left"></div> <div id="center"> Lots and lots of text goes here </div> <div id="right"></div> </div><!-- end of maincontent --> <div id="mainBottom"> <div id="left2"></div> <div id="center2"></div> <div id="right2"></div> </div> </div> CSS Code: html, body{ margin: 0px; padding: 0px; text-align: center; min-height: 100%;}
div{ border: 1px solid black;}
/* Hack for IE, Reset to 100% height */
html, body, #main, #mainContent, #left, #center, #right, #left2, #right2{
height: 100%;
}
#left, #center, #right{
height: 100%;
}
/* End IE Hack */
#main{
position: relative;
width: 100%;
min-height: 100%;
}
#mainTop{
margin: auto;
position: relative;
height: 210px;
width: 850px;
text-align: left;
background-color: yellow;
}
#mainContent{
margin: auto;
position: relative;
min-height: 100%;
width: 850px;
text-align: left;
}
#left{
position: absolute;
min-height: 100%;
width: 79px;
left: 0px;
background-color: yellow;
}
#center{
border: 1px solid red;
position: absolute;
width: 696px;
left: 79px;
background-color: #dcdbdc;
min-height: 100%;
}
#right{
position: absolute;
left: 775px;
width: 75px;
background-color: yellow;
}
#mainBottom{
margin: auto;
position: relative;
min-height: 146px;
width: 850px;
text-align: left;
}
#left2{
position: absolute;
min-height: 100%;
width: 79px;
left: 0px;
background-color: yellow;
}
#center2{
border: 1px solid red;
position: absolute;
width: 696px;
left: 79px;
background-color: yellow;
min-height: 100%;
}
#right2{
background-color: yellow;
position: absolute;
left: 775px;
width: 75px;
min-height: 100%;
}
Also shown he http://www.steudel.org/css/test.php The yellow divs represent images that border the content. The whole layout is supposed to be able to stretch vertically. I'm not sure why the text is not stretching the center div. TIA, Mark I have a page whose outer-most container has a fixed width. On some pages, there is a table whose width I cannot set to be fixed because its contents (more specifically the number of <td>s) are dynamic. My problem is that when the table has so many <td>s that its width is forced to be greater than its parent <div>'s fixed width, the other page elements are not rendered as desired. Here is a simple illiustration of what I'm talking about. The text on the page explAins my issues (although it should be evident from loooking at it in a browser). 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>Test</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
#outer {
width: 950px;
min-width: 950px;
background-color: #fc0;
}
#hdr {
background-color: #66c;
height: 50px;
padding: 10px;
color: #fff;
margin-bottom: 25px;
}
table#data1 {
background-color: #eee;
margin: 10px;
}
table#data1 td {
font-weight: bold;
}
</style>
</head>
<body>
<div id="outer">
<div id="hdr">
This box should span the entire width of its orange container box even if the orange box's width exceeedes the width of the browser window due to the content it contains.
</div>
<table id="data1" border="1">
<tr>
<td colspan="24"><p>This table has a lot of TDs which causes its width to go beyond both the 900px assigned to its containg DIV as well as the width of my browser window. My desired behaviours a </p>
<ol>
<li>the containing element would expand to the width of the table (meaning that the orange background will be displayed behind the content of the grey table)</li>
<li>the DIV with the blue background at the top would also expand to the width of its parent container (the DIV with the orange background)</li>
</ol>
<p>Neither of these are happening in Mozilla and only #1 is happening in IE.</p>
<p>I'm sure that Mozilla is displaying properly per the CSS spec, but there must be a way to acheive what I'm trying to do.</p></td>
</tr>
<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
</tr>
</table>
</div>
</body>
</html>
I'm not saying my code is correct and that the browsers are not displaying it properly. I know I'm doing something wrong, I just can't figure out what. Any suggestions? Dear all, IE problems trying to get a large amount of content to sit in a smaller div with overflow set to auto. In FF it works perfectly, but in IE the outer div ignores the width value I have set and instead expands to the width of the content. My code: Code: <div id="calendarWrapper" style="width:800px;height:600px;overflow:scroll;"> <div style="width:4000px;height:1000px;overflow:auto;background-image:url(img/calendarBackground.gif);position:relative"> <div style="background-color:#FFFFCC;position:absolute;top:76px;left:150px;width:1000px;height:74px;">Test</div> <div style="background-color:#FFFFCC;position:absolute;top:151px;left:300px;width:750px;height:74px;">Test</div> <div style="background-color:#FFFFCC;position:absolute;top:1px;left:75px;width:100px;height:74px;">Test</div> </div> </div> I found a couple more threads similar to this but none with a solution. any help most appreciated. Mark Hello All, I am trying to put together what seems like it should be a simple css layout but it just is not cooperating. Thought maybe somebody could point out what I am doing wrong. The site is southernshades.net If you shrink the browser and scroll down the footer goes on top of the content area. I am going crazy trying to figure out how to get the footer to stay at the bottom. Any ideas would be greatly appreciated and save my sanity. Thanks. Hi, For some reason the bottom of my content is getting chopped off on some pages. For instance, the Bookmark icon and neighboring links are getting cut off at the bottom of this page when viewing with Google Chrome: http://www.sustainablelivingcolorad...ble-living-101/ Any ideas? Thanks. I'm sure this has been asked, and I've googled for help without finding anything that works. I'm redesigning a site from html/tables -> css and need to keep a footer at the bottom of each page (after the content, not stuck to the bottom of the window). Being pretty unfamiliar with css positioning I'm having a bit of trouble. Site is here - huguenotbats . com / redesignfiles CSS is here - huguenotbats . com / redesignfiles / stylesheets / hbstyle . css As is everything works, but when I try to add a footer it sits on top of the content. Help, anyone?? Is it possible to get my content to stick to my footer? I have a sticky footer at the bottom of my page and I would like the content to always bee 100% of the page and sitting right on top of the footer. I been messing around with different things for hours and nothing I seem to do will get my content box to stay stuck to the footer at the bottom of my page. Here is a link to the site printing.ou.edu/new-index.html This is what I am trying to get printing.ou.edu/Draft3.png Thanks for your help :-) (EDIT) I have Solved this problem sadly I had to use Java Script to get it done but it works. Here is the Java Script for anyone else trying to do something like this. Code:
<script type="text/javascript">
window.onload = function() {
contentHeight();
}
window.onresize = function() {
contentHeight();
}
function contentHeight() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
var headerHeight = document.getElementById('header').offsetHeight;
var footerHeight = document.getElementById('footer').offsetHeight;
var pushHeight = document.getElementById('push').offsetHeight;
var menuHeight = document.getElementById('menu').offsetHeight;
var contentElement = document.getElementById('content');
var contentbgElement = document.getElementById('content-bg');
contentElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
contentbgElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
}
}
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;
}
</script>
See you all around Hi, I am generating what should be a simple css layout. I have a header, some left content (which is comprised of layers that hold an image and some over the top to form a kind of navigation tablet), some content to the right of that for text, and finally a footer. Bog standard design... The problem I have is that the content to the right of the left content is sat below both the left content and the footer currently. What it should be doing is sitting to the right of the left content and where the text 'grows' push the footer down the page: 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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:224px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#content {
background-color: #ccc;
padding-bottom: 50px;
}
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
#content {
background-color: white;
padding-bottom: 50px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
background-color: #ff0;
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0 !important;
bottom: -1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="224" align="left" />
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 4px; top: 229px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 257px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Stuff.</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p><p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thanks, G http:// 192.168.0.253/ index.php?option=com_content&view=article&id=50&Itemid=67 I need for the content to stack in front of content (as it currently does) so the content appears to scroll behind it. BUT - I need for the footer to sit at least below the fold so that it isn't so obtrusive. I'm tired of googling and can't spend any more hours trying to get it to work!! It's an artisteer template, joomla. Help? THANK YOU!! Hi I'm having a bit of trouble with a DIV/CSS layout - 2 DIVs are inside a 100% height 100% width container DIV. The first (top) DIV is the content and the second (bottom) DIV being a 100% width 240px height footer DIV. I can make the footer stick to the bottom of the page and display fine no problem, however, I am having trouble getting the content div to fill only the area above the footer. If I specify a 100% height for it then it extends the entire height of the page and content disappears behind the footer. Plus, I want to absolutely center the content in the space above the footer, not the absolute center of the whole page, which is all i am acheiving with 100% height! Basically, I need the content DIV to extend 100% then subtract the 240px height of the footer - I suspect it's not wise to mix px and %, however. I have attached an image to help with my probably confusing explanation! I do have a workaround using tables, which I would ideally like to avoid, particularly as it does not support IE6/7 browsers. If a solution can be acheived which uses JavaScript to format the DIVs, then I am open to any suggestions anyone may have. Thanks R Here's how the footer looks now: And here's the desired result: Any ideas? It'll have to be cross-browser friendly (even IE6, god help me). Thanks! I have a container div which includes a #header div, a left-floated #content div, a #right div, and a #footer div. The #content div has a background image that does not want to extend all the way down within the div to snuggly join the footer in any IE browser. I've tried the Holly hack, adding a line-height, relative positioning but to no avail. The stylesheet is embedded in the html file. Here's the link: http://www.emaycreations.net/BuildWebsiteIII/Week6/finalexamPractice.html It looks great in NN, FF and Opera but neither IE 5 nor 6 displays the page correctly. Can anyone help? Mari-Anne in Montana |
|||||||