|
CSS - Page Doesnt Touch Bottom Of Browser
Link to site
If you view the page in FF, the main page (General Information) doesnt extend all the way to the bottom of the browser. I think it's lacking text, because if you visit the other pages, it works fine. This works regardless under IE. I'm stumped! Similar TutorialsHey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ??? Code:
a:link {
color: #333333;
font-size: 11px;
}
a:hover {
color: #333333;
font-size: 11px;
}
a:visited {
color: #333333;
font-size: 11px;
}
Hi all! I try to create a website which of itself has no scrollbar. The website needs to be 100% height of the browser. The website contains a div (with overflow: auto which starts at a certain height and needs to end at the bottom of the browser. When there is a short text, the should be no scrollbar, when there is a large text, there should appear a scrollbar. I got quite far with this as you can see below. However this script works in Firefox, Opera & Safari for Windows, it doesn't in Internet Explorer. With a large text it just makes the page larger and there is no scrollbar. Does anyone know how to fix this for at least IE6 & IE7? Thanks! [PHPNET] <html> <head> <title>TEST</title> </head> <body style="width: 100%; height: 100%; padding: 0; margin: 0; overflow: auto;"> <div style="top: 200px; bottom: 0; background: #ff0000; display: block; position: absolute; width: 300px; overflow: auto; left: 50%; margin-left: -150px;"> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> ABC<br /> </div> </body> </html>[/PHPNET] heloo geniuses. please to someone helping me for preventing more of the hair pulling out. I am trying to figure out how to repeat a border image, basically to repeat the div holding the wood images on this page: http://greentypeoftube.com/kc/ essentially to have the bottom expand with the user's browser window size. thanks to you for the thinking and the helping of me with it. s oh. also I am hoping for a way to show the scroll buttons only if the text [will be in another div being cropped by the content window}. is there a way to do this with css? I am working much very hard to be more with css to design than just designing it. Page looks fine on my screen but when i resize window-divs overlap or in some cases just text runs on top of other divs messed up. Do I need to set all my width-height values and margins to auto? Margins in my wrap are auto. What are common causes of this? heres my css-its kinda a potpourri Code: #wrap {width:70%;
min-width:700px;
margin-left: auto;
margin-right: auto;
}
#headertop {background:url(gradient.png);
height:40px;
}
#header {background:url(black.png);
height:70px;
}
.title {float:left;
margin:5px;
}
#menu {float:right;
margin-top:30px;
margin-right:20px;}
.link {float:left;
margin-top:8px;
margin-left:5px;
background:url(gradient.png);
border-right:1px solid black;
height:auto;
width:auto;
padding:5px;
text-align:center;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:0px;
border-top:1px solid grey;
}
#floatright {float:right;
width:400px;
margin:0px;
padding-left:10px;
border-left:2px double grey;
height:350px;
background:#000000;
}
.nav {float:left;
height:400px;
padding-right:10px;
padding-top:50px;
}
.txt {padding-left:10px;}
#bottom{background:#000000;
height:10px;
margin-top:0px;
border:2px solid black;}
#content {
border:1px solid grey;
background:#fffbe9;
}
.floatl{float:left;}
#testarea {
padding-top:25px;
padding:10px;
min-height:330px;
background:#ffffff;
border-left:1px solid grey;
}
#testareaalt {
width:auto;
padding-top:25px;
padding:10px;
min-height:330px;
height:auto;
background:#000000;
border-left:1px solid grey;
}
.area {background:url(background.png);
height:30px;
}
.button {width:100px;
height:25px;
border:1px solid black;
background:grey;
padding:8px;
display:block;
}
.top {background:000000;
height:15px;
}
h3 {font-family:Sans-serif;
background:url(gradient.png);
padding:5px;
}
h4 {font-family:Sans-serif;
background:url(black.png);
padding:5px;
margin:0px;
color:#ffffff;
}
h4.g {font-family:Sans-serif;
background:url(black.png);
padding:5px;
margin:0px;
color:#00af33;
}
p {font-family:verdana;
line-height:15px;
font-size:13px;
padding-left:10px;
padding-right:10px;
color:7d7d7d;}
ul {font-family:verdana;
line-height:15px;
font-size:13px;
padding-left:40px;
padding-right:10px;
color:7d7d7d;}
table {border-collapse:collapse;
padding:5px;
font-family:verdana;
line-height:15px;
font-size:13px;
padding-left:10px;
padding-right:10px;
color:7d7d7d;
}
table.social {border-collapse:collapse;
padding:10px;
margin:5px;
background:url(gradient.png);
}
}
td.alt {background:grey;
}
#textbox {
border:1px solid grey;
background:url(black.png);}
#menutrial {float:right;
margin-right:0px;}
.left {float:left;
margin:10px;
clear:left;}
.container{margin:8px;}
a:link, a:visited {
color: #cc0033;
padding:5px;
text-decoration: none;
font-family:Sans-serif;
}
a:hover, a:active {
/*background-color: #C74350;*/
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 1px #33ff00;
font-family:Sans-serif;
}
#textboxa{
border:1px solid grey;
background:#000000;}
img.alt {margin-left:90px;
margin-right:auto;
width:70%;
border:0px;
}
#right{float:right;}
Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page. Code:
.top {
position: relative;
left: 0px;
top: -75px;
}
That will of course run an image off the top of the page, but Code:
.bottom {
position: relative;
left: 0px;
bottom: -250px;
}
this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance. Using mysql and php I gather data belonging to different people and I put together one page for each person. The bottom of each page has a different footer: Quote: <div id="footer">Data...</div> The declaration of style is Quote: <style type="text/css"> #footer { position: fixed; width: 100%; height: 180px; top: auto; right: 0; bottom: 0; left: 0; } </style> The problem is that each page has the same information shown at the bottom. However if I check the source code it shows different data for each bottom of page. Help! Is there a way to align something from the bottom of the page? I'm using CSS to create a gradient, and all is well except for the bottom of the page: http://www.area51entertainment.co/gradient_problem.png For some reason it's placing a red bar at the bottom of the gradient. Any ideas why? http://www.area51entertainment.co/index.php EDIT: Fixed using the following: Code: background-repeat: no-repeat; background-attachment: fixed; Hi all, I am in the early stages of developing a new website and really cant understand why there is a space between the browser window and the container div. Here is the code I have used: html, body { padding: 0; margin: 0; background-color: #D3D3D3; font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 14px; color: #000000; } #page-container { margin-top: 0; margin-left: auto; margin-right: auto; padding: 0; background-image:url('back.jpg'); background-repeat:repeat-y; text-align: center; width: 800px; } I have tried all sorts of variations but nothing will get the page-contaner div to go flush with the top and bottom of the browser window! (I have used this code many times before and it always works, even sites I have stored locally on my machine using this look fine?!?!?) Any help would be greatly appreciated! Rich i tried searching for this and wasn't able to find any threads. i have a container div with my content, and then i have a footer div that i want to always be at the bottom of the page. i've got it to work in FireFox, but IE is a pain as usual. can anyone look at this and tell me if i'm doing it right and/or what i'm doing wrong? thx. css Code:
#container {min-height: 87%; width:620px; margin: 30px auto; position:relative; text-align: center; clear: both; background-image: url(images/backgroundCol.gif); background-repeat: repeat-y;}
#container_footer { margin:auto; height:50px; width:620px; text-align:center; background:#FF0000; clear:both; position:relative; margin-top: -80px; clear: both; background-image: url(images/footerBackground.gif); background-repeat: repeat-y;}
html Code: <div id="container"> container <br class="clearall" /> </div> <div id="container_footer"> this is the footer <br class="clearall" /> </div> here is the page in action so far http://www.photography139.com/index.html 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. Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page. my site stylesheet (see div#footer) Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work. Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you I can't seem to work out where the huge space at the bottom of the pages are coming from. This is the test page http://midnighttempest.com/layouttest.html as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off. Anyone help? I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space. Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default? Thanks for any help. Hi everyone, It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on... http://www.karenwilliamson.com/joom2/ I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean. Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF. It seems to my novice eyes that it should be controlled by Code: table.contentpaneopen Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers? Thanks for any input Rob I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column. Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px; Here is my HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height: 100%;
}
.left-col {
position: absolute;
width: 150px;
top: 130px;
left: 0px;
padding-left: 3px;
z-index: 2;
}
.right-col {
position: absolute;
width: 150px;
top: 120px;
right: 0;
padding-right: 3px;
z-index: 1;
overflow: hidden;
clear: both;
}
.center-col {
position: relative;
min-width: 300px;
min-height: 100%;
height: 100%;
z-index: 3;
top: 140px;
margin: 0px 160px 150px 170px;
text-align: left;
padding:5px;
}
.heading {
position: absolute;
left: 0px;
top: 0px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 0px;
z-index: 3;
padding-top: 25px;
margin: 0px;
display: block;
}
.footer-bar {
width: auto;
padding:10px 3px 3px 0px;
clear: both;
background-color: gray;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
center content<br />
center content<br />
center content<br />
center content<br />
</div>
<div class="left-col">
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
</div>
<div class="right-col">
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
</div>
<div class="heading">
head content
</div>
<div class="footer">
<div class="footer-bar">page bottom</div>
</div>
</body>
</html>
|
|||||||