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.
Related
http://jsfiddle.net/hga7Lxt8/1/
float: right;
margin-left: 10px;
There is no margin to the left of the orange-red box (the top borders of the rows reach right up to it), even though it has such style attribute. What is wrong?
You can see the real problem when you apply a semi-transparent background-color.
What you need to understand is that content floats around a floating element, not containing boxes (unless they also float or have a display property set to something other than block).
You fix it by setting margin-right: 110px; on your .row:
http://jsfiddle.net/hga7Lxt8/4/
What you want to achieve can only be faked and would not "work" if your floating element has any transparency (or box-shadows).
The row elements are continuing behind the orangered box. Try:
.right {
float: right;
width: 100px;
height: 100px;
background: orangered;
}
.row {
border-top: 1px solid;
overflow: auto;
margin-right: 110px;
}
http://jsfiddle.net/thrb5936/
My css skills are limited so I hope someone can help me with this...
I am using Foundation and I have 2 divs with 2 images.The left div overlaps the right div. When the browser is resized, the left image loses it's original position.
This is what the site looks like when the browser is expanded.
And this is what happens when I resize the browser.
This is the code that I currently have on the left image (wireframe image)
.wireframe-img {
display: block;
float: left;
margin-top: 50px;
max-width: 815px;
overflow: hidden;
padding-left: 50px;
position: absolute;
width: 100%;
z-index: 1
}
And the image on the right (ipad) is in a div with this code:
.small-7 {
position: relative;
width: 58.3333%;
}
.column, .columns {
float: left;
padding-left: 0.9375em;
padding-right: 0.9375em;
}
.right {
float: right !important;
}
I basically want the "wireframe" image to scale down and not lose it's original position when the browser is resized.
Rather than overlapping the image, it's better in your case to just have two separate images next to each other that match up pixel perfect.
Then just have one image like this:
http://puu.sh/6UTqY.jpg
and the other like this:
http://puu.sh/6UTqa.jpg (Roughly)
Unless there's another reason as to why you're keeping that images separate and trying to overlap them?
The div currently on the right is at the correct position, where i want it to be. But if the page gets too long, i want it to scroll along, so i add position: fixed;
But now its somewhere completely different. How can i fix this?
JSfiddle with the code
Try with:
#right {
float: right;
width: 200px;
background: red;
position: fixed;
margin-left:620px;
}
I add 620px because your left column has 600px and before your position: fixed there were a 20px of margin between each columns.
That's because fixed behaves like absolute (except that it will stay put when you scroll the page). You have to provide top and left values.
Try this:
#right {
width: 200px;
background: red;
position: fixed;
left:710px;
}
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;
}
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/