How do I position elements to be aligned on the right edge of the window?
If you want to remove the element from the flow,
position: absolute;
right: 0;
top: /* whatever */;
but it's hard to answer your question with the "right" answer without more detail/context.
You can float them right like so:
float: right;
That depends on the elements around it but that would be the easiest way for sure.
Note that this won't work for ABSOLUTELY positioned items obviously. See this link for a lot more details: http://www.w3schools.com/css/pr_class_float.asp
hi there is better way to use float:rightto make your elements in right side and if you want fix it ant dont want move this with scroll you can use this one
.element{
position:fixed;
z-index:1000;
height:30px;
width:60px;
right:0;
}
and also view this view this
If you want it pinned in the sense that it stays on the right of the viewport, even as you scroll the page, then you need to use fixed positioning, like this:
.pinned {
position: fixed;
right: 0;
top: 0;
width: 50px;
height: 50px;
}
Obviously change the top/width/height values to suit your purpose.
using the float property:
float: right;
You can also use Absolutely Positioned elements
div{
position:absolute;
z-index:1000;
width:20px;
height:20px;
top:0;
right:0;
}
This will pin the div to the right, top corner of the page. I use 1000 for z-index because it allows you to shim other z-indexes below it without having to alter this style.
display: flex;
height: 10%;
width: 100%;
background-color: #111111;
color: #FFFFFF;
text-align: center;
font-size: .85rem;
If you place your #footer at the bottom of your html and use Flex Box it will automatically stick to the bottom of the content. You need to also make your other divs for your content display: flex; as well.
Here is a link to Flexbox. It is such a good tool.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I've looked around and haven't managed to find out how to do this, even though it should be relatively easy. I have a page I want to scroll sideways, split into halves which both fit the window size. That part is easy enough, but what I then want to do is have the right-hand div (which is hidden on page-load) to stick out over the left div slightly, by 40px or so - so you can see the edge of it.
Here's the basis of how it is already - jsFiddle
I hope the question makes sense. I've tried a bunch of combinations of position:absolute; so far, but no joy. Any help would be awesome.
If I understand you correctly, you want the right hand div to 'peek' over the edge of the left hand div, so that it's discoverable by the user even when it's outside the viewport.
The easiest way to do this is to set a position: relative on the element, then set a left value of -40px. This will make the element 'peek'. See here: http://jsfiddle.net/NUWqE/1/
I might have misunderstand exactly what it is you're looking for but does the following solve your problem, without having to bump the div around with left. That way there's no mixing of pixels and %'s and you won't have to address the problem of white space on the right side of #right.
#wrapper {
width: 200%;
position:relative;
}
#left {
width: 45%;
float: left;
background-color: red;
}
#right {
width: 55%;
background-color: aqua;
position: absolute;
right: 0;
}
So if you're looking for a fixed width "peek", how does the below answer suit:
http://jsfiddle.net/NUWqE/1/
#wrapper {
width: 200%;
position:relative;
}
#left {
float: left;
width: 50%;
background-color: red;
margin-right: -40px;
}
#right {
float: right;
width: 50%;
background-color: aqua;
position: relative;
padding-left: 40px;
}
You'll obviously have to adjust the padding of elements inside #right but you would probably be doing that any way depending upon how you'd like to style the content. Hopefully this is what you're looking for.
i have a div with overflow-y: hidden; and a have a pseudo element to the right of the buttons that i want to position outside the div but it will not work. here is the fiddle - http://jsfiddle.net/PAdSd/1/.
But if i give the div no overflow it will sit out of the div fine. Here is that fiddle - http://jsfiddle.net/PAdSd/2/.
Any help would be wonderful
Remove position: relative from .nav. You can see the results in this jsfiddle.
A similar problem had me banging my head against the wall for days. Trial and error and pure chance produced the solution. Not sure about cross browser compatibility, but it works in chrome and firefox (as long as you prefix your css3 properties with -moz).
Here's another way of solving this problem (especially useful when you can't just remove position:relative because of say, using height:100%; on the pseudo element):
To make the content visible, add padding to the bottom, say 10px;
Then to remove the paddings effect for other elements use margin-bottom:-10px;
So:
.nav{
background: transparent;
height: auto;
overflow-y: hidden;
position: relative;
/*new stuff*/
padding-bottom:10px;
margin-bottom:-10px;
}
It's hidden because that is what you have told it to do.
http://jsfiddle.net/PAdSd/3/
If you don't want it hidden, but still want overflow hidden then you will need to reposition it higher. .nav:after will put content at the end, but inside of the nav tag.
You can position it higher by adjusting the top css value.
.nav:after{
content: "";
border-radius: 5px;
background: #000;
width: 10px;
height: 10px;
position: absolute;
left: 500px;
margin-left: 1px;
top: 10px;
box-shadow: -5px 5px 0px #8f0222;
z-index: 20;
}
Or you might want to use body:after instead, because it doesn't sound like you actually want it inside the nav bar.
I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.
How can I fix my CSS:
div#Footer {
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Its a little unclear what you want but this code has worked well for me.
Credit - http://css-tricks.com/snippets/css/fixed-footer/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This is a simpler solution.
#footer {
bottom: 0%;
position: fixed;
}
You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.
z-index: 1000;
This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.
Had a similar issue.
Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".
i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.
I have a layout with a middle aligned paging.
The paging is middle-aligned be this trick:
.pager_wrap
{
float: left;
position: relative;
left: 50%;
}
.pager
{
float: left;
position: relative;
left: -50%;
}
This seems to be working fine.
But there was a request to add a facebook like button the right side of the pager, but NOT affecting the position and middle alignment of the paging.
I was thinking about somehow putting the facebook like in a div right after the .pager-wrap div, and somehow modifying its vertical alignment to be over the .pager-wrap div.
I'm no mage in css and these kind of problems tend to take extremely long time to figure out. Can someone help me out on this one?
.button
{
float: right;
position: relative;
right: 10%;
}
Instead of float your can give display:inline-block to it's & text text-align:center to it's parent for center your paging DIV . May be you write like this:
.pager_wrap
{
background:red;
text-align:center;
}
.pager
{
background:yellow;
display:inline-block;
*display:inline /*IE*/
*zoom:1;
text-align:right;
padding:10px;
}
.facebook{
float:right;
width:30px;
height:40px;
background:blue;
}
Check this http://jsfiddle.net/DdPtv/
Place the facebook icon in a div, position it relatively, float to the right and if needed apply a z-index to bring it higher on the stack.
I have designed a website and am a little bit stumped right now.
If you view the website at:
http://www.noxinnovations.com/portfolio/charidimos/
If you change the size of the window you will notice the Navigation overlaps the logo/header.
Anyway to change this? What I want to do virtually is to make the window have a scroll bar appear if that is possible.
Any ideas?
Thank you :-D.
It's your width: 100%; in your #header element that's causing your strange overflow behavior. Place your #logo and #navigation elements inside of another div with a fixed height and width that sits inside of the #header, then give your #header the property overflow: hidden; and that should fix you right up.
If you want your navigation not to overlap, you can do the following
#navigation {
width: 500px;
height: 100px;
padding-top: 52px;
position: fixed; // CHANGE FROM RELATIVE TO FIXED
left: 770px; // ADD THIS BIT OF POSITIONING (ADJUST AS NECESSARY)
float: right; //REMOVE THIS FLOAT
text-align: center;
vertical-align: middle;
}