I am trying to make list expand from bottom to top. It works, but if the list is too big, it goes over the "top" div. My idea is when the list is too big, I will have scroll bar and "bottom" div to have like 50% of "top" div. I can't make it top: 0 because If I do it, the div goes up. Same as for using height on "bottom". I know why is not working now, but I have no more ideas how to fix it. Any ideas would be helpful.
https://plnkr.co/edit/0qZVy8PeZ6uUwejV1AFf?p=preview
.top {
position: relative;
height: 300px;
background-color:red;
}
.bottom {
position: absolute;
bottom:5px;
background-color:blue;
}
I have just gone through your provided link. Add these properties to .bottom
max-height:300px;
overflow-y:auto;
Take position: absolute; off of .bottom and then add overflow-y: scroll; to .top
Related
Here is my website: http://www.bkd.com/wealth-advisors/index-test.htm
The problem I am currently having is that the "Wisdom for Your Wealth" bar will only show up on certain resolutions. Is there anyway I can make this show up on all? I need it to lay across the page the same on every page. A little below the bottom but not all the way at the bottom.
Anyone have any suggestions?
Here is my CSS:
.bottombar {
position:fixed;
margin-top: 800px;
top:0px;
left:0px;
height:42px;
width:1800px;
z-index:100;
}
Here is the HTML
<div style="position:absolute; top:-50; left:5; font-size:80px; z-index:4"><a
href="/wealth-advisors/about-test.htm"><img src="/wealth-advisors/images/wisdom-
wealth.png" height="52" width="800" class="bottombar" ></a></div>
Please let me know if you need anything else from me.
Thank you!
-Marcy-
This will solve your problem:
.bottombar {
bottom: 0;
display: table;
height: auto;
position: absolute;
width: 100%;
}
With width: 100%, position: absolute and display: table you don't need to adjust top, left or any margins.
use bottom:0; i would may try removing the margin top as well. i would change the width to 100%. also remember you have the image in a div that's absolute and the image is fixed.
I am trying to put a gray bar on the bottom of the screen of my webpage, regardless of the resolution. However, when I try, it seems to just go up or down when I go in a different resolution. Is there any way to fix this?
Also, the bar is made out of CSS using the div id tag.
/* HTML*/
<div id="info">Scroll for info</div>
/* CSS */
<style>
#info {
height: 40px;
position: relative;
margin-top: 25%;
background-color: #393838;
opacity:
}
</style>
EDIT: I want it to be on the bottom of the screen, but then when I scroll down it goes up towards the top of my screen.
If you want it on the bottom and always at the bottom, you have to use position: fixed.
You could try this:
#info {
height: 40px;
position: fixed;
bottom:0%;
width:100%;
background-color: #393838;
opacity: 1;
}
http://jsfiddle.net/rX4nd/1/
How about adding entering as well?
.someDiv {
position:fixed;
width:50%;
height:300px;
margin-left:-25%;
background:#063;
bottom:0px;
left:50%;
}
Here is some Documentation that should help you with what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
Tl;dr, set "position: fixed" to place it at the bottom of the rendered part of the parent.
I have this css, now it looks like a want it to in my 1366x768 laptop screen, it appears at the centre of the screen at the bottom. But when I move it to my larger screen, the footer appears in a different position, further up the page.
Can anyone give me some suggestions please?
position:relative;
width:900px;
height:70px;
background-color:#0CF;
margin-top:38%;
right:25%;
left:50%;
margin-left:-450px;
This is why:
margin-top:38%;
38% of any different screen height will result in a different position for your footer, assuming it is position relative to the body and not to another element that may have another position. In your case I would be willing to bet it is relative to the body.
If you change that to position absolute, then give it a bottom value it will stick to the bottom of the screen.
position:absolute;
width:900px;
height:70px;
background-color:#0CF;
bottom:0;
right:25%;
left:50%;
margin-left:-450px;
If you do
position: absolute;
margin-right: auto;
margin-left: auto;
with the width that you already have, that should centre it. Then
bottom: 0;
should put it at the bottom of the screen. Then you can get rid of left, right, margin-top.
[edit] The finished thing would look like this
position: absolute;
width: 900px;
height: 70px;
background-color: #0CF;
margin-left: auto;
margin-right: auto;
bottom: 0;
I'm wondering if it's possible to position relative container with unknown height at the bottom left of a website so that any text in it starts at the bottom and goes up (as we add it)? It's like exact opposite of how browser usually renders it (from top to bottom, vertically).
Example:
<div class="container">Unknown amount of text</div>
.container { max-width: 600px; left: 100px; bottom: 100px; position: absolute; }
This works just fine but if Unknown amount of text is longer than height of user's monitor, vertical scrollbar does not appear. It requires position: relative; then but is there any way to make this container stick to the bottom left with position: relative;?
I'm looking for HTML/CSS solution only (if that's possible at all).
You can use an outer div to get some manipulation effect.
Give same bg color to both parent and child div then it give the bottom to top effect.
HTML
<div class="wrap">
<div class="container">Unknown amount of text</div>
</div>
CSS
html, body{height:100%}
.wrap{ background:green; overflow:auto; height:100%}
.container { max-width: 600px; background:green; position:absolute; bottom:0; }
DEMO
You can try this one i think this one help you
just changes in css. & in bottom you just increase margin top for set the bottom align.
.container { max-width: 600px; left:0; margin-top:200px; position: relative; }
first off I would like to say thanks to those who have helped me out before on here.
Ok the problem is this: I have several images which are placed inside a a div called "Banner"
at the top of my web site. I also have a text link to facebook which is floated to the right. They are each centered using the following css...
#banner img {border:none;
margin:0 auto;
display:block;
}
a#social_network {
float:right;
margin:10px;
padding:0px;
}
I have also floated a link to facebook to the right, which is given an id called "social_network" and is also within the banner div. The problem is that when I float this textual link right my top image is no longer centered. I thought that maybe I needed to clear the float but that did not work I was doing it wrong.
All suggestions are appreciated.
Maybe you can try this:
#banner {
position: relative:
}
#banner img {
border: none;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /* <--- Here's 1/2 of the width of the image */
margin-top: -50px; /* <--- Here's 1/2 of the height of the image */
}