Im trying to float an element right outside of the main page content and want to avoid the horizontal scroll bar from cutting it off
Example
http://www.warface.co.uk/clients/warface.co.uk/test
I've noticed its been achieved in the footer here, but can't figure it out how
http://www.webdesignerdepot.com/
HTML
<div class="wrapper">
wrapper
<div class="imageright">
</div><!-- imageright END -->
</div><!-- wrapper END -->
CSS
.wrapper {
background: yellow;
margin:0 auto;
max-width: 1140px;
height:500px;
}
.imageright {
background: aqua;
width:520px;
height:285px;
display:block;
position: absolute;
float:right;
right:-100px;
}
The position: absolute; and the right:-100px; is pushing your element past the right edge of the viewport. Floating does not affect absolutely positioned elements.
If you want the element to be 100px away from the edge, make that a positive 100px. Or, if you want it right up against the edge, make it 0. If you truly want to float it, remove the absolute positioning.
Hopefully I understood the question, and I hope this helps!
Edit: I re-read the question and think an even better solution would be to add position: relative; to the wrapper. Right now, your absolutely position element is positioned relative to the viewport. If you give wrapper relative positioning, it will cause imageright to be positioned relative to wrapper.
you can apply overflow:hidden; to the body, which is how you get what you're after, but it's highly inadvisable. Another way to take the div "out of flow" is to make it position: fixed; but that will mean it will be visible as you scroll down.
Related
I'm looking for a way to scroll a panel that sits below a panel that doesn't scroll. Here's a fiddle with what I'm trying to do:
http://jsfiddle.net/zh59w/
Basically, the 'stay on top' needs to stay on top but all the 'scroll' elements needs to scroll as necessary. I was hoping by nesting the scrolling elements in a div (named nest), and position that nest relatively, then I'd be able to position the scrolling div absolutely, but when I do that it seems to take up no space and disappears.
The closest thing I can get to work is this:
http://jsfiddle.net/zh59w/1/
But you'll see I have to cheat by setting the:
#scroll {
top: 20px;
}
But I'd like to avoid this because I don't know how big the 'stay on top' is going to be.
Anything I can do (other than set the 'stay on top' to fixed)?
Here is a fixed div that stays at the top of the page:
HTML:
<div id="stay_on_top">STAY ON TOP</div>
<p>SCROLL</p>
CSS:
#stay_on_top {
position: fixed;
top: 0;
margin: 0;
padding: 7px;
width: 100%;
background-color: gray;
}
Here the code: http://jsfiddle.net/aziom/ceNFH/
I've created a JSFiddle here:
http://jsfiddle.net/AsHW6/
What I'm attempting to do is get the down_arrow.png's centered in their containing divs. I was able to center the up_arrow.png's using auto margins. I'm using the fixed property to use them as footers, as I want them to be at the bottom of the div regardless of resolution.
My question is what is the best way to center a bottom fixed image within the width of its containing div?
Some code from the fiddle (I'm having trouble with the StackOverflow formatting):
.scroll-arrow-down {
position: fixed;
bottom:0;
}
I should add that I don't care about IE hacks/workarounds at all, this application will not be targeting IE in any way.
Any comments and answers are appreciated.
If you used fixed position it will be fixed to the viewport (which I don't think you want). Using absolute positioning will position the images in reference to the item that contains them.
I added a left:45%; which pretty much centers things, but depending on the width of your arrows that may need to be updated.
.scroll-arrow-down {
position: absolute;
bottom:0;
left: 45%;
}
http://jsfiddle.net/AsHW6/1/
You can wrap the arrow-down images in a div that gets aligned to the bottom. The div can then be set to have its content centered.
Wrapping in HTML:
<div id="list1">
<img src="image/up_arrow.png" class="scroll-arrow-up">
<p class="list-title" id="list-title1">Autonomous Behaviors</p>
<div class=".scroll-arrow-down">
<img src="image/down_arrow.png">
</div>
</div>
and the css:
.scroll-arrow-down {
position: absolute;
bottom: 0;
background-color: red;
width: 100%;
text-align: center;
}
I have a div with variable dimensions that I need to dynamically horizontally center within its container. Here is the current structure...
<div class="outer">
<div class="inner">Sample</div>
</div>
...the "inner" div is the one that will very in height and width based on its contents, and it needs to be horizontally centered (equal space at its left and right sides) within the "outer" div, which may or may not have fixed dimensions (so the "inner" may be within the "outer" div's width, or it may spill out, but always be centered in it). Here are the styles I currently have...
.outer {
width: 10px;
margin: 0 auto;
position: relative;
}
.inner {
position: absolute;
bottom: 0;
}
...the properties of the "outer" work well to center it within what it's contained in, but the properties of the "inner" have it aligned to the left edge of the "outer" div.
I tried a few options with negative margins and left/right values for the "inner", but they seemed to depend on fixed pixel values whereas I need the dimensions of it to remain variable relative to its content.
The caveat is that the "inner" div needs to be absolute positioned because it has to fix to the bottom edge of the "outer" (hence the "bottom: 0") even when the height of the "outer" is shorter than the inner.
Here's a running example: http://jsfiddle.net/bVC3J/
Anyone have any thoughts on how I can achieve this without using JS? If there is no CSS solution I am open to JS, so you're welcome to suggest that as a last resort. Thanks.
This might do the job for you: http://jsfiddle.net/fF3A4/1/
.outer {
width:300px;
height:300px;
display:table-cell;
background:#333;
vertical-align:bottom;
text-align:center;
}
.inner {
width:200px;
margin:0 auto;
background:#ccc;
display:inline-block;
}
I'm trying to get a jquery carousel centered on the screen, even when the clipping area is wider than the viewport. This will basically always give the element a negative left margin -- how can I specify this? The clipping area is a fixed width but of course the viewport area is variable.
Here's the best solution I've been able to find uses a wrapping element around your-fixed-width content, then a -50% margin on the content itself. This is off the top of my head, but it should be enough to get you started. Here's the code snippet:
div.wrapper {
position: absolute;
left: 50%;
}
.content {
position: relative;
margin-left: -50%;
}
<div class="wrapper">
<div class="content">JQUERY BIZ-NASS HERE</div>
</div>
Of course, this assumes that your div here is a direct descendant of the body tag, and that your browser specifies body to have a width of 100% and no margin or padding.
I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.