|
CSS - Position A Div At The Bottom Of Content.
I want a footer that's at the bottom of the page.
If there isn't much content that means it should be at the bottom of the screen and there will be no scrollbars. If there is tons of content then it should show after the content and only be visible if the user scrolls to the bottom of the page. This code shows what I'm after and the problem I'm hitting. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<style type="text/css">
body, html {margin: 0; padding: 0; height: 100%}
#top {background: red; position: absolute; top: 0px; left: 0px; height: 50px; right: 0px;}
#content {background: orange; margin: 50px 200px;}
#leftNav {position: absolute; left: 0px; top: 50px; bottom: 50px; width: 200px; background: yellow}
#rightNav {position: absolute; right: 0px; top: 50px; bottom: 50px; width: 200px; background: cyan}
#bottom {background:green; position: absolute; bottom: 0px; left: 0px; height: 50px; right: 0px;}
</style>
</head>
<body>
<div id="content">
Content<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 /><br /><br /><br /><br /><br /><br />
</div>
<div id="leftNav">
LeftCol
</div>
<div id="rightNav">
rightNav
</div>
<div id="top">
I'm at the top.
</div>
<div id="bottom">
I'm at the bottom.
</div>
</body>
</html>
Appreciate your thoughts. Similar TutorialsI'm trying to position a DIV on the right bottom side of the page using the following code: position:absolute; right:0; bottom:0; Unfortunately when I scroll down the page, the div remains in it original place :-( I have a logo which I would like always positioned at the bottom of a div. Does anyone know a way of achieving this? http://www.willisemail.co.uk/skill/ The logo is in the bottom right hand corner. Cheers Jemes /* Site Holder Start */ #box { width: 750px; margin: 0px auto; padding: 0px; text-align: left; border: 1px solid #979696; background-color: #FFFFFF; background-image:url(../Images/mid.jpg); } /* Site Holder End */ /* Site Holder Start */ #box2 { margin-left: 49px; margin-right: 50px; margin-top: 10px; margin-bottom: 10px; padding: 0px; text-align: left; background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0; } /* Site Holder End */ /* Content Start */ #content { width: 461px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /* Content Start */ #content2 { margin-left: 14px; margin-right: 15px; margin-top: 0px; margin-bottom:0px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /*Right Menu Start*/ #right { width: 178px; padding:0px; float:right; background-color:#FFF; overflow: hidden; } #right2 { margin-top:0px; margin-left:14px; margin-right:14px; padding:0px; background-color:#FFF; overflow: hidden; } .RightMenu { margin-top:10px; padding: 0px; font-size: 13px; color: #6884AE; font-weight: bold; } .RightMenu ul { padding: 0px; margin: 0px; list-style-type:none; } .RightMenu li { background-image: url(../images/img_Li_Image.jpg); background-repeat: no-repeat; background-position: 0em; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 14px; margin-top:5px; } .imgTitle { text-align:center; margin-top: 13px; margin-left:0px; margin-right:0px; } /* Right2 Menu End */ .imgRight { text-align:center; margin-top: 10px; margin-left:0px; margin-right:0px; border: 1px solid #979696; } .imgMain { text-align:center; margin-top:10px; border: 1px solid #979696; } .Menu { margin-top:10px; padding: 0px; } .Menu ul { padding: 0px; margin:0px; list-style-type:none; } .Menu li { display: inline; list-style-type:none; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 0px; margin:0px; } .Main { padding:5px; border: 1px solid #979696; margin-top:8px; margin-bottom:10px; } .Cove{ margin-top:15px; text-align:center; } I want to be able to position an image at the very top of a cell/div/container/whatever and one at the very bottom. It's too bad there is no float:top and float:bottom. Something like this [HTML] <div style="background-color: red"> <img src="images/top.jpg" style="?" /> <img src="iamges/bottom.jpg" style="?" /> </div> [/HTML] Hello Trying to position an image at the bottom of my webpage which: a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for) b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do) c) I can layer divs on top of so far this is as close as I've got: in the html <!-- container for site info --> <div id="container"> <!-- other content in divs here --> <!-- other content in divs here --> <!-- footer for bottom image --> <div id="footer"> <!-- footer details, who / when / copyright --> <div id="footerdetails"> details here </div> <!-- footer details, who / when / copyright --> </div> <!-- footer for bottom image --> </div> and in the css #container { position: absolute; top: 0px; width: 750px; height: 100%; } #footer { position: absolute; bottom: 0px; height: 230px; width: 750px; background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: bottom left; } #footerdetails { position: relative; margin: 0px 0px 0px 0px; padding: 9px 0px 10px 70px; top: 195px; width: 680px; text-align: left; voice-family: "\"}\""; voice-family:inherit; } I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this? Thanks in advnace. a+ gar Hi guys, I am attempting to create a rather complex background, which needs to 'stretch' in a certain place. Here is my code; which currently works flawlessly in Firefox: CSS Code: body {
margin: 0px; padding: 0px; height: 100%; background: #AAAAAA;
}
#cont {
position: relative; margin: 0px auto; top: 20px; width: 760px; height: 800px;
}
#titlet {
position: absolute; top: 0px; left: 0px; width: 742px; height: 9px; background: url(img/titlet.png);
}
#titletr {
position: absolute; top: 0px; left: 742px; width: 17px; height: 9px; background: url(img/titletr.png);
}
#title {
position: absolute; top: 9px; left: 0px; width: 742px; height: 164px; background: url(img/title.jpg);
}
#titler {
position: absolute; top: 9px; left: 742px; width: 17px; height: 164px; background: url(img/titler.png);
}
#bgnd {
position: absolute; top: 173px; bottom: 336px; left: 0px; width: 742px; background: url(img/bgnd.jpg);
}
#bgndr {
position: absolute; top: 173px; bottom: 336px; left: 742px; width: 17px; background: url(img/bgndr.png);
}
#clouds {
position: absolute; left: 0px; bottom: 17px; width: 742px; height: 319px; background: url(img/clouds.jpg);
}
#cloudr {
position: absolute; left: 742px; bottom: 17px; width: 17px; height: 319px; background: url(img/cloudsr.png);
}
#cloudb {
position: absolute; left: 0px; bottom: 0px; width: 742px; height: 17px; background: url(img/cloudsb.png) no-repeat;
}
#cloudbr {
position: absolute; left: 742px; bottom: 0px; width: 17px; height: 17px; background: url(img/cloudsbr.png) no-repeat;
}
HTML Code: <body> <div id="cont"> <div id="titlet"></div><div id="titletr"></div> <div id="title"></div><div id="titler"></div> <div id="bgnd"></div><div id="bgndr"></div> <div id="clouds"></div><div id="cloudr"></div> <div id="cloudb"></div><div id="cloudbr"></div> </div> </body> The problem relates to the 'bgnd' and 'bgndr' values. I have combined 'top' and 'bottom' to have the backgrounds tile in exactly the right place between the other div elements. Is there a hack that can allow me to use this method in IE? Hi, I'm trying to do something that is simple with table cells but which I'm finding difficult using CSS. Basically I have a container div that is 400px height. I want to position 3 divs in a row (float: left) at the bottom of that div and put an image in each of them. So, in short... <div id="outer"> <div id="inner1"><img src="x.jpg" /></div> <div id="inner2"><img src="y.jpg" /></div> <div id="inner3"><img src="z.jpg" /></div> </div> ...where the three images are bottom aligned. I want to have the images in their own div containers so that I can give each of their boxes 33% of the screen width and set apdding if required. No doubt I'm approaching this the wrong way. Can anyone help? Thanks, Pat Ok I have two layers positioned on the bottom left and right of my page as you can see here.. The problem is when I resize the page the two layers move up with it and then if I use the scroll wheel they dont go back to the bottom and they stay where they are. Anyone know how I can get it so if I were to resize the page the two elements would stay at the bottom. I tried that footer demo that everyone posts the link for but I couldnt get it to work for the case I have. Anyone have any ideas? Thanks , appreciate any help you can give me. 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. Greetings! I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it. I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work! What I am currently doing: Code:
body{
background:transparent url('/flames.gif') center bottom fixed repeat-x;
}
I now am fixing it with tables.... thanks for the forum! [IMG]cater-express dot com/IE7.png[/IMG] An image of IE7 and IE6 of my newly relaunched website - I actively have: html,body { text-align: center } #content { width: 400px; margin: 0 auto; text-align: left } </style> __________ it does not work... please help bring content up to top in "content" ______ I wish I could just do all the cooking and not the coding! Thanks for any help! Hello. I'm having an impossible time trying to get my page to behave properly. First, here's a link to the testing site: http://www.tromadance.com/hoffman_test/index.php The black left/right borders are supposed to go down to the bottom of the page (as long or short as that may be, depending on the content). Whichever is longer between the left side content or the right side content should be in charge of "stretching" the page. There is also a footer that should remain at the bottom, which is not even being shown... I added borders to some of the divs to try to see what was going on. It looks like a mess, but I'm not sure what i am doing wrong!... Here is the CSS, followed by the HTML... CSS: Code: /* CSS Document */
html, body {
background-color: #8A1410;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #000;
height: 100%;
}
p {
font-size: .8em;
}
#container {
background: #EC1D25;
width: 800px;
margin: auto;
padding: 0px;
text-align: left;
border-left: 2px solid #000;
border-right: 2px solid #000;
overflow: hidden;
height: 100%;
}
#header {
background-color: #EC1D25;
width: 800px;
height: 177px;
background: url(../images/header_top.jpg) top center no-repeat;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
}
#nav {
background-color: #000;
color: #FFF;
text-align: center;
width: 100%;
height: 50px;
}
#nav p {
margin-top: 30px;
}
#sidebar {
background-color: #EC1D25;
width: 270px;
min-height: 86px;
float: left;
margin-top: 20px;
text-align: center;
margin-left: 10px;
border: 1px solid #999;
}
#donate {
background-color: #000;
width: 270px;
height: 500px;
}
#maincontent {
background-color: #7AD3F7;
margin-top: 20px;
margin-right: 10px;
height: 100%;
width: 500px;
float: right;
border: 1px solid #66F;
}
#spacer {
clear: both;
border: 1px solid #FF0;
}
#footer {
font-size: .7em;
text-align: center;
height: 20px;
margin-top: 10px;
}
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TROMADANCE!</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav"><?php include("includes/nav.php") ?></div>
<div id="sidebar">
<object width="270" height="215"><param name="movie" value="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="270" height="215"></embed>
</object>
Tromadance 10th Anniversary PSA
<p>
<div id="donate">
</div>
</p><br />
<p>asdsadsa</p>
</div>
<div id="maincontent">
<p>SAMPLE TEXT</p>
</div>
<div id="spacer"></div>
<div id="footer"><?php include("includes/footer.php") ?></div>
</div>
</body>
</html>
Thank you in advance for any help that can be offered!!!... So I have a 3-column layout in CSS and I'd like to have the content in the right-most column to be align to the bottom, like so: Code: | LEFT | MIDDLE | | | (top) | | | | | | | | | | | | | | | | | | | | | | RIGHT | | | | (bottom) | Any idea how to do it? Thx! Hi there, I have 2 main divs.. one left for navigation and one to the right for the content. For some reason, the right hand side one is displaying content at the bottom where the left div's content ends, instead of at the top. This is my code. Any help on what I have done wrong would be great! PHP Code: #main_left{ width: 238px; float:left; background-color: #EBE1D1;} #main_left_inside{ padding: 10px;} #main_content{ margin-left: 248px; background-color: #ffffff;} #main_content_inside{ padding: 10px;} Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know. hi, I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page. Here is a link: http://www.jcstrategies.com/jeff/featured_listings.php CSS CODE ----------------------------------------------------------- /***********************************************/ /* emx_nav_left.css */ /* Use with template Halo_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url(./images/bg_grad.jpg) fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:95.6%; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 5px 10px 5px 5px; margin:0px 0px 0px 179px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 16px; right: 0px; color: #919999; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 0px; right: 6px; padding: 0px; margin: 0px; } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url(./images/glbnav_background.gif); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; } a.glink, a.glink:visited{ font-size: small; color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{ background-image: url(./images/glblnav_selected.gif); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{ font-size: 70%; margin: 0px 0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(./images/bg_nav.jpg); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /************* relatedLinks2 styles **************/ .relatedLinks2{ margin: 0px; padding: 10px 0px 10px 1px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ ANY IDEAS???? Hi all, this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules) ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link. any help would be greatly appreciated. sorry for my bad english Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... |
|||||||