I've got a a div acting as a container which is positioned as relative.
Within this div I have 3 other divs positioned as absolute.
<head>
<style>
#container{ position:relative; }
#block1, #block2, #block3 { position:absolute; }
#block2 { top:100px; }
#block3 { top:600px; }
</style>
</head>
<div id="container">
<div id="block1"> some text </div>
<div id="block2"> some text </div>
<div id="block3"> some text </div>
</div>
How can I get correct height of a relative div with js.
I tried .clientHeight and jquery .height() but won't work.
Thanks!
I think you got something wrong. When you position divs inside other divs like that, the container-div will have nearly no (or no) height at all. That's cause of the absolute positioned divs. They can be placed "outside" the container-div, and only use it as a reference for x and y offsets.
Related
I have a very deeply nested <div> element. How to render a new element inside this element that will float at the top of the screen (body or html)?
Sticky position is relative to the closest element (parent) and this is not an answer.
If it can not be done with CSS, is there any JS library that can do it?
<html>
<body>
<div>
<div>element should be sticky to the top of the page</div>
</div>
</body>
</html>
Add a class to a div and give position fixed and top 0 to get the element in the top part of screen.
Also, in this example, I gave body 200vh in order to scroll and see the element fixed on top.
body {
height: 200vh;
}
.sticky {
position: fixed;
top: 0;
}
<html>
<body>
<div>
<div class="sticky">element should be sticky to the top of the page</div>
</div>
</body>
</html>
boilerplate html/css/etc.
then
<div>
<div style="margin:0 auto; position:relative">
<div data-item data-ng-repeat="item in ItemCtrl.item"></div>
</div>
</div>
... the above uses an Angular template, which is incredibly simple. It just positions absolutely my content into one, two, or three columns. If I set the screen to two columns I'd like it to be centered. I'm able to do this via code, but I wanted a more fluid feel and I suspect CSS can do this, but I'm having trouble w/it.
Here's my template:
<div style="width:400px">
Content here ...
</div>
My Angular directive simply grabs the element above and changes its CSS position property to absolute and gives it a top and left property.
Why is this not working? Can this be done?
So in essence if I have one column, which is 400px and is put in my display at position 0, which would occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-400)/2.
If I have two columns, which are 400px and are put on my display at positions 0 and 410, which would also occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-810)/2.
UPDATE:
Here's a fiddle http://jsfiddle.net/0LLa1rs4/
UPDATE:
Here's a solution, although I'm not sure it's the most elegant. Any suggestions to make it better are welcome.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...
<div style="position:absolute; width:400px; left:50%; margin-left:-200px">
<div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
Item #1
</div>
<div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
Item #2
</div>
</div>
</div>
</body>
</html>
Well I'm not sure what you're trying to achieve, you jsfiddle is not very clear. Do you want the number of columns to be dynamic or you choose it? I've made a jsfiddle that could answer the issue but I'm not sure:
http://jsfiddle.net/0LLa1rs4/1/
Basically you should play with
display: flex;
And on the child element
margin: auto;
From your fiddle, it looks like you're trying to center elements horizontally within a container. Your description camouflages this.
Here's a simple fiddle that does similar things to the fiddle you posted, but in a much more concise way: http://jsfiddle.net/gunderson/5eLx4r4p/1/
HTML
<div class="container">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
</div>
CSS
.container{
margin: 20px;
width: 100%;
}
.item{
width: 400px;
margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
background: green;
}
I am trying to integrate a simple slider within my website and found this example on jsfiddle
I do want to place the slider "relative" within my website, but if I change the css to
position: relative; the slider does not work properly anymore, as it now displays the fading images above one another like this
Why is this happening and how can I position the slider-div "relative" within my website?
I tried wrapping it with another div-layer but without success.
Try a wrapper div as you say.
You should put your slider inside another div and then position this wrapper div relative.
HTML:
<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
<img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
<img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
<img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
<img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>
CSS:
#wrap{
position:relative;
top:100px;
left:100px;
}
DEMO
UPDATE
To float within the website add a height to the #wrap
#wrap{
position:relative;
top:0px;
left:100px;
height:250px;
}
DEMO2
You don't need a wrapper. You are setting position: relative on the wrong element. Set it on #banner_area, not #banner_area img. DEMO
I'm trying to make a tab menu that sits on the bottom of a div and when a tab link is clicked it slideup with it's content.
Here is what I've got so far. I really can't see why it's behaving they way it is
http://jsfiddle.net/5mVt8/11/
The key bits:
#content {
position: relative;
width:500px;
height:400px;
overflow:hidden;
}
.page {
position: absolute;
left:0;
top:380px;
width:500px;
height:400px;
}
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Full code here: http://jsfiddle.net/5mVt8/11/
Is these a bug with having a absolute positioned div inside a relative div with overflow? Can anyone tell me why this doesn't work or how I should approval this?
Remove the #one #two #three from your html.
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Now simply write your animate correctly.
$('.page a').click(function(){
$(this).parent('.page').animate({top:0}).addClass('open');
});
http://jsfiddle.net/5mVt8/18/
EDIT: I am sure you could find a cleaner way to write your CSS. All those absolutes and positioning and z-indexes. I would find a better way to accomplish what you want, but that's me.
You have #content fixed height with overflow:hidden and pages on the bottom partially hidden with this overflow. Now on link click anchor works and #content scrolls down to the hidden block top. You should add return false at the end of click event function to prevent default behavior.
Also you have missed the animate method syntax. It should be like this
$(this).parent().animate({'top': '0px'}, 300, "swing");
http://jsfiddle.net/5mVt8/27/
I have a div with width: 400px and height: 300px
Inside the div I will insert some Text which should be aligned horizontaly and verticaly.
if the text inside the div is bigger than the div, it should show the scrollbars. Here is a picture which shows what i mean:
The following works in webkit & geko & IE8 upwards. Try some of these techniques for vertical centering if you need legacy IE compatibility: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ OR Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?
<div style="height:300px; overflow-y:auto; border:solid 1px #CCC; width:400px;">
<div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
test
</div>
</div>
you might want to use on div as a container and then put your text in another div
you might also want to check out jscrollpane
div.container {
overflow: auto;
text-align: center;
}
<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>
Also try to set a fixed height for your container so you can get the scroll bars
div.container {
max-height: 200px
}
The post by cronoklee works good too u might want to combine the two methods to get exactly what you want