|
CSS - Position A Div Right-bottom
I'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 :-( Similar TutorialsI 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 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. 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] 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 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? 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 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. 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 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. this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
I have this code... Code: <div style="width:200px;height:300px;border:1px solid red;"> <div style="width:198px; height:30px;border:1px solid blue;">ok</div> <div style="width:198px; height:30px;border:1px solid blue;">ok</div> <div style="width:198px; height:30px;border:1px solid blue;">wish this at bottom</div> </div> Above example is here... http://www.casti2001.com/box.html I ask, how can I put last box at bottom? Thanks for yor help! I have a DIV with no border or padding that I cannot get to bottom itself in IE7 even with
Code: position: absolute; bottom: 0px; is there a logical explanation for this? I tried Code: fixed: bottom; without success. Hi there, I am having trouble aligning 2 divs to the bottom. I have a left and right side div for a header area, however the right side is taller than the left, so it is leaving a gap at the bottom of both sides. This is my CSS: PHP Code: #nav_wrapper{ } #nav_left{ width: 620px; padding-left: 20px; float:left; } #nav_right{ float:right; text-align: right; padding-right: 20px; } #member_login{ width: 180px; padding: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; background-color: #f6f6f6; line-height: 200%; } #member_login a{ font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; font-weight:bold; text-decoration:underline; } and this is my HTML: PHP Code: <div id="nav_wrapper"> <div id="nav_left"> left content <div id="nav_right"> <div id="member_login"> right content </div> </div> </div> Any ideas? Hi guys I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column I'm making a complete tableless css layout for the first time Look: Here's the skeleton code Code: <!-- Begin Left Column --> <div id="cssleftcolumn"> HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS) <div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div> </div> <!-- End Left Column --> And here the css code Code:
#cssleftcolumn {
width: 218px;
float: left;
color: white;
}
#imagedownmenu {
background-image: url(../images/fondo_botleft.jpg);
background-position: bottom left;
background-repeat: no-repeat;
height: 76px;
vertical-align: bottom;
}
I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this Thanks a lot in advance, Hi, I am using this code running well so it draws a box in the upper left side the way I expected. It affects a <div class="textOnBodyBottom">... PHP Code: .textOnBodyTop { float: left; position: relative; margin-top: 20px; margin-left: 20px; border: 1px solid Black; } ...but I wanted to draw another box at the bottom so I expecte foll code would also run well... PHP Code: .textOnBodyBottom { float: left; position: relative; margin-bottom: 20px; margin-left: 20px; border: 1px solid Black; } ... but it doesn't. Can you help me? Tks! Current working file is he http://ravenwave.com/clients/opi/ link to the css file is he http://ravenwave.com/clients/opi/opi.css The issue is that I have a background with an associated navigation bar that need to align bottom. I've got that part all figured out and working. However, the snag is that if the browser window is shrunken to a small vertical height, the bottom navigation bar (and associated background) keeps riding up and then gets mixed up with the other content. Conversely, if the page is extra long in content and so needs to scroll, then the bottom bar and background is aligned to the bottom of the window, rather than the page. Obviously this has to do with absolute vs. relative positioning and is not working how I want it to work. Right now I'm guessing that I need to switch to a relative postioning, but I'm hoping that maybe there are some other fixes that I don't know about. I've tried a few things, but am just kind of wasting time and need to get this figured out. Thanks |
|||||||