|
CSS - My Columns Are Not Scrolling Above The Fixed Footer
I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css?
The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed. The css and xhtml arevalid. Here is the link: http://www.lonniebruhn.com/sitelab/ Thanks for your help LB Similar TutorialsHello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer 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 all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. I have a scrolling div on a page. Within the div is a tabular form. I want to place a button that is has a fixed position within the div. So if the HTML code is like this: Code: <div id="div1"> <div id="buttonID"></div> <form> <table> <tr> <td> </td> </tr> </table> <form> </div> The css I thought would achieve what I wanted is Code:
#div1{
div1 CSS goes here.
}
#div1 #buttonID{
position: fixed;
top: 300px;
left: 20px;
}
However, while the button is fixed, its position is fixed in relation to the page, not within the div which is annoying. Can anyone point out what I'm doing wrong here? Can a sumbit button for a form be located outside the form or does it matter? Hello, I'm new here and in desperate need of your help. What I'm trying to accomplish is this: http:// i29.tinypic.com/259inue.jpg There are two problems. 1) How do I place two sidebars next to each other? 2) How do I keep the header and the sidebars fixed, and the content the only element that you can scroll in? Any hints would be greatly appreciated! Sorry about my Engish, I'm afraid it's not very good. Layout problem that works in IE but not in Firefox I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels. www[dot]cs[dot]lewisu[dot]edu/~ongni/usjournal/redesign/test3.htm The structure holds in IE, but totally breaks down in Firefox. Thanks in advance for the help. Hi... Not sure how to title this message, but here's the problem: I've got a site that has three columns of variable length text. Each column must have a 2px left border. No problem so far. Under each column of text, I must align a block of links. These blocks must align along the top link. The borders must continue from the top of the text to the bottom of the links. Does this make sense? The problem I have is the border is only solid on the column with the longest amount of text and breaks on the shorter ones. I can get this to work by setting a fixed height for the text, but that doesn't seem like a great solution as it would have to be changed as the text length changes. my CSS: Code: .box {border-left: 2px #CCCCCC solid; width: 254px; float: left; padding-left: 10px; padding-right: 10px;}
.txt {font: verdana; font-size: 12px; color: #000000;}
.linkscontainer {width: 853px; clear: both;}
.linkbox1 {bottom: 0px; position: relative; border-left: 2px #CCCCCC solid; padding-left: 10px; padding-right: 10px; float: left; width: 254px;}
.linkbox {bottom: 0px; position: relative; border-left: 2px #CCCCCC solid; padding-left: 10px; padding-right: 10px; float: left; width: 254px;}
my html: Code: <html> <head> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body> <div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br /> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> </div> </div> <div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br /> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> </div> </div> <div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br /> <p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br /> afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p> </div> </div> <div class="linkscontainer"> <div class="linkbox1">link 1<br /> link 2<br /> link 3<br /> link 4<br /> </div> <div class="linkbox">link 1<br /> link 2<br /> link 3<br /> link 4<br /> </div> <div class="linkbox">link 1<br /> link 2<br /> link 3<br /> link 4<br /> </div> </div> </body> </html> Thanks for any help! :grimey Does such a thing exist? I have seen various examples and tried more than one, and every time I either end up with a right margin when the page is not long enough to scroll, or I end up with a horizontal scroll bar when the page is scrolling. All I want is a fixed position footer (at the bottom of the viewport permanently) where the page content scrolls vertically behind it without any gaps Hi All, I am experementing with a fixed watermark image/background on my webpage.The code worked fine to prevent the image from tiling however when I scroll the whole lot goes as well,the table of rolovers and the header image. I need a code to keep the table of javascript and the image fixed while only the text scrolls. Also as you will see the bg image takes up the whole page which results in the text scrolling over the entire height of the page.Is there any code I can apply to make a cut off point for the text,for appearance sake lets say the top bar of the image .Here is the url of the page I am working on. Thanks URL I have a fixed top header and menu with 20% height and 19% width respectively. I can not get the content to scroll under the header or have the footer to be scrolled at the bottom of the content along with it. Code: .content {
position: relative;
top: 20%;
left: 19%;
width: 80%;
height: 75%;
background-image: url("image.jpg");
}
#footer {
position: relative;
text-align: center;
left: 19%;
width: 80%;
height: 5%;
top: 95%;
background-color: grey;
}
Hi, I believe this to be a IE bug that causes the middle click (used for scrolling a page) to be disabled on floating objects. I've noticed this before in the past but I don't know what the real cause is. If I remember correctly this problem is fixed in IE 7. The problem is I have 2-3 floating columns centred in the middle of the page (using margin: auto). Now in firefox when you middle click within the floated objects in the middle of the page you are able to use the scrolling function. In IE 6 when you middle click on the object it will not work, you have to middle click outside the boundaries in order to scroll. Does anyone know the cause of this strange behaviour? I did a search but I can't seem to find anything about it. Cheers! I'm trying to redo my layout so it will load fast for my users and the way I am doing it is with divs. Anyways I have it finished but I've run into a problem; my columns are all different widths. I want them to all meet at the footer. To see what I mean take a look. http://www.rpgchateau.com/rpgapex/test/test/index.html The css is url is... http://www.rpgchateau.com/rpgapex/test/test/test.css I would rather not replace them with an image to get them to repeat, is there any other way I can do it? First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short): http://scott.sauyet.com/CSS/Demo/FooterDemo1.html It works great for a liquid layout in FF and IE6. However, for fixed width layout, the container is left justified instead of centering the container. See: http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html Anyone want to hack at this with Firebug and see if they can get the container to be centered? Thanks! I know there is a well documented solution for this but as I can't remember what is causing it, it's a bit hard to search for it. Basically I want to fix my footer to the bottom of the page. As soon as I set it's position to fixed it works in Firefox but in IE the footer shoots back up to the top of the page. If I set the position to absolute then the footer starts at the bottom but the page scrolls with the page content. Sorry for the large amounts of CSS / HTML. PHP Code: <style type="text/css"> <!-- html { height:100%; margin:0; padding:0; } body { margin:0; padding:0; height:100%; background:#FFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: url(images/layout/top_back.jpg); background-repeat: repeat-x; } #wrap { position:relative; background-image: url(images/layout/top_section.jpg); background-repeat:no-repeat; min-height:100%; } * html #wrap { height:100% } * html #inner_holder { height:100% } #footer_hold_all { position: absolute; bottom: 0; width: 100%; height: 134px; } #footer_hold_top { position: relative; top: 0; width: 100%; height: 109px; background: url(images/layout/footer_image_back109.png); } #footer_hold_bottom { position: relative; top: 0; width: 100%; height: 25px; background: url(images/layout/lowernav_background.jpg); } #footer_top { background: url(images/layout/illustration.png); position: relative; top: 0; left: 0; width: 760px; height: 109px; } #footer_bottom { line-height: 25px; text-indent: 5px; text-align: left; vertical-align: middle; } #footer_bottom a{ color: #435769; text-decoration:none; font-weight:bold; font-size:1.0em } #footer_bottom a:hover{ color: #E2B69D; } .bold { font-weight: bold; } #os_logo { width: 196px; height: 78px; position: absolute; top: 0; left: 0; float: left; } #os_search { width: 196px; position: absolute; top: 10px; right: 0; float: right; } #os_search label { display: block; } #os_search form { display: inline; } #inner_holder { width: 100%; position: absolute; top: 100px; } #left { float:left; width:200px; text-align:center; border: 1px dashed green; } #main { position:relative; margin-left:200px; border: 1px dashed red; } #right { float:right; width:200px; text-align:center; border: 1px dashed blue; } #content { padding:5px; margin-right:200px; text-align:left; border: 1px dashed purple; } --> </style> DIV Layout: PHP Code: <body> <div id="wrap"> <div id="inner_holder"> <div id="left"> left </div> <div id="main"> <div id="right"> right </div> <div id="content"> </div> </div> </div> <div id="os_logo"> <img src="images/layout/xxx_logo.jpg" alt="Logo" width="196" height="78" /> </div> <div id="os_search"> <form action="searchsite.php" method="post" name="search"> <label for="search">Search Site</label> <input name="search" id="search" type="text" size="20" /> <input name="submit" type="submit" value="GO" /> </form> </div> <div id="footer_hold_all"> <div id="footer_hold_top"> <div id="footer_top"></div> </div> <div id="footer_hold_bottom"> <div id="footer_bottom" class="bold"> <a href="sitemap.php">Sitemap</a> | <a href="accessibility.php">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </div> </div> </div> </div> </body> Okay I've gotten to a point in my design where I'm a bit stumped. I have been working on a three column layout with a fixed header and footer. The entire idea behind the fixed footer is so that my entire promotional press kit and social networks will be available and in view in the footer above the fold at all times for easy access. After a few little tweaks the layout looks good and turned out nicely. However, now I am adding content and navigation and I am having some issues with regards to how it is reacting when my browser window is re-sized and the layout of the far left navigation. Okay so when I shrink the browser window two things happen, I get a horizontal scroll, which isn't too bad, I mean that is normal in a lot of sites but because the footer and header are fixed it looks a little weird. Is there a way to stop this without going fluid? The other thing it does when it is shrunk, the background image in the footer shifts to the right along with the navigation which should not happen if it is fixed right? What is could be causing that? If I have nested div inside the footer div does it need to be declared fixed too or can it be relative because it is a child of the footer? The biggest problem is that my navigation menu on the left will have four links. I would like two links above and two links below. I would like the top left and bottom left to align to the left with space between those two links and the top right and bottom right, which will also align left. How would I accomplish this using the least amount of mark up in the xhtml and the least amount of code in css? Right now they aren't links, I'm just trying to lay it first. What I was thinking, was using a div to hold a footer ul and li class? Would I just apply the class to each link or would I apply the class to two, one div class above holding two links and one div class below or do I even need an extra footer div anyway if I'll be assigning separate classes? I'm confused as to the best way to fix all this, your help would be appreciated, the xhtml validates and so does the css. Here is the link to the testing site: http://www.lonniebruhn.com/sitelab/ I have found many different ways of doing the 3 column fluid layout on the net... http://css-discuss.incutio.com/?page=ThreeColumnLayouts But none of theme seem simple enough to implement 3 fluid columns where each column is a percentage. I have found a couple, but modifying the css to find my percentage needs loses the effect often times because the css code is long and complicated with many embeded divs. Isnt there an easy way to have a header at top, 3 columns (20%,60%,20% widths) each stretching the same height and a footer at the end? I thought that floating would work, but i get mixed and undesired output in IE and FF. Thanks to all that contribute. Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content. Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this? Here's my css: #container{ position:relative; height:100%; width:780px; } #footer { position: relative; top: 0px; left: 0px; clear:both; } Hi, My site is divided into 2 columns: The left column is 760px in width. I want the right column to take up the remaining space of the screen - no matter what resolution i'm on. Here's the page: http://www.3003online.com/demos/ecoceylon/ As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt... Here's the code: Code: <div id="container"> <div id="logo"> <div class="hide">test</div> </div> <div class="spacer"> </div> </div> <div id="bgcolor_area"> </div> And the CSS: Code:
body {
color:#FFFFFF ;
font-family: Trebuchet MS, Arial ;
font-size:9pt ;
font-weight:normal;
line-height: 18px;
background-color: #FFFFFF;
margin:0px;
width:100%;
height:100%;
}
#bgcolor_area {
background: #000000;
height: 100%;
width: auto;
float: left;
}
#container {
text-align: left;
width: 760px;
float: left;
}
#logo {
height: 89px;
width: 760px;
background: url(../images/0_top.jpg) no-repeat;
margin: 0;
}
Does anyone know what I'm doing wrong? Thanks a lot! 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 Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. |
|||||||