I'm having a bit of a frustrating issue...I thought I found a few answers here but nothing as of yet seems to be working.
Here is an image to start off with:
http://www.shaunmbaer.com/wordpress/wp-content/uploads/2013/02/Melissliss_01.jpg
Then here is the html:
<section class="A">
<aside class="B"></div>
<header class="C">Title</header>
<article class="D">Lorem ipsum...</article>
</section>
And the css as of now:
A{width:100%}
B{width:220px; height:100%; float: right; background= #fff url("foo") repeat}
C{width:450px}
D{width:450px}
I am using wordpress (this bit is a post), so all of the content is automatically generated. I need div "B" to be 100% of the parent div. It does not have any content besides a repeating background image (the site is responsive and this div will disappear at the next breakpoint).
I cannot position them absolute since I cannot give the article ("D") a fixed height (at least I think that statement is correct...)
Can anyone help or point me to somewhere that can? Preferably a CSS solution, but jQuery is a-ok at this point too!
Thanks a ton2.
I'm pretty sure you can use absolute positioning for the B element, and specify 3 sides for the element to stick to:
.A {
position: relative;
}
.B {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 220px;
}
Related
I'm going to guess the answer to this question will be "no," but it would be so nice, I'm going to ask anyways.
What I'm trying to do is freeze an element inside a scrollable DIV such that it stays in place vertically. This is to implement a frozen row feature in a table.
It's pretty easy to do with JavaScript and absolute positioning. Here's the HTML for a container and three inner DIVs (see here for the live version):
<div id="container">
<div id="background">
Content
</div>
<div id="absolutediv">
Absolute stays inside
</div>
<div id="fixeddiv">
Fixed escapes!
</div>
<div id="absolutediv2">
Stays put!
</div>
</div>
The relevant CSS:
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#absolutediv {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
#fixeddiv {
position: fixed;
top: 100px;
width: 300px;
background-color: #ECC;
}
#absolutediv2 {
position: absolute;
width: 300px;
top: 120px;
background-color: #ECC;
}
And JavaScript that will hold #absolutediv2 in place:
var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');
container.addEventListener('scroll', function() {
div.style.top = container.scrollTop + 120 + 'px';
});
So #absolutediv2 is behaving the way I want. But look at #fixeddiv. This gets close to what I'm after, and I suspect it looks nicer on mobile devices because the browser can hold it in place without waiting to run the script. Except that it (a) runs right over the borders, and (b) doesn't scroll horizontally.
Is there any way to get what I'm after with pure CSS, something that would run well on a mobile browser?
(In my page, one way to do this would be to place the frozen row above the container DIV, but the number of frozen rows changes depending on where the user has scrolled to, meaning that the container DIV would have to move around.)
Edit:
To sum up, I want a div that:
Scrolls horizontally with its container
Stays put when its container scrolls vertically
Looks like it belongs to its container
Looks nice on a mobile browser
The last one is the tricky bit. I can achieve #1, #2, and #3 with an absolute-position div and JavaScript, but it looks ugly on a mobile browser because it lags. Using a fixed-position div, I can get #2 and #4, and I can achieve #1 with JavaScript (the lag doesn't bother me so much horizontally), but not #3, because a fixed-position div suddenly sits on top of its container.
Google has a suggestion for this kind of thing, but it's a pretty extreme solution: https://developers.google.com/mobile/articles/webapp_fixed_ui
Ok, I haven't tested this but it should be along the right track. Basically this gives you the ability to create multiple "Sticker" items with the HTML5 data attribute I created for you data-special="sticker". The jQuery looks for these, then copies the data and appends it to another <div> element that is positioned where the original was, then it hides the original.
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#original-element {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
.sticker {
position:absolute;
}
<div id="wrapper">
<div id="container">
<div id="background">
Content
</div>
<div id="original-element" data-special="sticker">
I want to stay put!
</div>
</div>
</div>
$("[data-special='sticker']").each(function () {
$('#wrapper').append(
$('<div/>').html($(this).html())
.addClass("sticker")
.css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
.css('left', $('#container').css('left'))
.css('width', $('#container').css('width'))
.css('background-color', $(this).css('background-color'))
);
$(this).css('display', "none");
});
Let me know how it works for you, also one downside to this is once the original element is hidden, the space it used to take up is then collapsed... I'll try to brainstorm a solution for that.
Edit:
Changed the JS to get the #container width instead of the original element width as the original element is larger that the container.
Edit:
Tested: jsfiddle
Some issues would be that the element will then also overlap the scroll bar, if you knew the width of that you could then subtract if from the value.
Also check the updated code above. There were some errors...
You might want to have a look at the following post:
How can I make a div stick to the top of the screen once it's been scrolled to?
As explained in this answer:
A script-free alternative is position: sticky, which is
supported in Chrome, Firefox, and Safari. See the article on
HTML5Rocks
and demo, and
Mozilla
docs.
As of today, the demo linked works for me in Firefox but not in Chrome.
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 fixed positioned element somewhere near bottom of my page. As there is more content to it than window height itself displays rest of it's been cut down.
I've tried adding overflow:auto to fix this issue and be capable of scrolling through fixed positioned element but no luck.
I suppose there might be a javascript solution near by but wondering if there is a css one as well.
Hope my question made sense.
Thanks
You have to fix the height/width to get scrollbars, otherwise the fixed element expands out of view. Here's a little demo: little link. Basic outine:
HTML:
<div class = "fixed">
Glee is awesome!<br/>
...
Glee is awesome!<br/>
</div>
CSS:
html, body {
height: 100%;
}
.fixed {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 100px;
overflow: auto;
}
I have an element that is fixed and has a margin from the left of the screen. I want to make this element right of a wrapper instead because people who have smaller resolutions or larger will have the element really far away or really close to my wrapper.
I hope this makes sense! :S
Thanks
Using both fixed and relative on the same element is as far as I know impossible.
What you could do is a jQuery solution.
But is the fixed position really necessary? How about fixing the wrapper then just using relative on the other document to position it relative to the wrapper?
That should solve it.
You could use something like this :
HTML
<div id="wrapper">
<div id="fixed"></div>
</div>
CSS
#wrapper {
width: 400px;
height: 600px;
margin: 0 auto;
}
#fixed {
width: 40px;
height: 100px;
position: fixed;
top: 0;
margin-left: 400px;
}
Simple jsfiddle : http://jsfiddle.net/MXgT9/
I know its easy to stack images on top of one another but I just wondered if this could be achieved but maintaining a fluid image? As soon as I use the position attribute, I have to supply a width. Then the image won't re-size with the browser.
Thanks for any help.
Joe
You could of course use width: 100%;. Also, you wouldn't need to put them inside divs if you just specify display: block; on the img element. You may have to specify max-width, but that depends on your particular application and required browser support.
A width : 100% works with position : absolute if display : block
Your problem is likely that you have only absolutely positionned img in your div, so its dimensions are null (because positioning rules.)
Two way to solve this :
make one img not absolutely positionned. Its dimensions will be be dimensions of the parent div
use a transparent img, with position : relative, with the same dimension than your real imgs : it's quite dirty, but it'll set the parent div dimensions.
These'll work only if your imgs' dimensions are the same. Otherwise, you must use a JS solution.
Make the photos the background on either an empty <img> or <div> with something like this
.container {
position: relative;
height: 400px;
width: 100%;
}
.container > div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div style="background: url('myimage1.jpg');"><!-- nothing --></div>
<div style="background: url('myimage2.jpg');"><!-- nothing --></div>
<div style="background: url('myimage3.jpg');"><!-- nothing --></div>
</div>