Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Divs on for my site:
Header
Banner (inside the banner div: is another div call innerbanner )
Main Content
Second Content
FooterWrap
I have several divs tags on a site I'm trying to develop, and 2 of the div tags I'm using an absolute position ( 1 for Banner and the 2nd one for the Footer), however when I use the absolute positioning for the banner it pushing my main content div upward making it invisible, but my footer doesn't have that problem. Can you assist me?
Absolute Positioning Inside Relative Positioning
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
if you want to set a div absolute position make sure that the div which contains it has a relative position so it won't get out of the box and disorder the elements, try this for example:
html:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
css:
.container{
width:75%;
height:500px;
border:1px black solid;
position: relative;
}
.box1{
width:50px;
height:50px;
border:1px solid red;
position:absolute;
top:0;
left:0;
}
.box2{
width:50px;
height:50px;
border:1px solid green;
position:absolute;
bottom:0;
right:0;
}
http://jsfiddle.net/ahmedskaya/DZ2DF/
Please check by defining some height to your parent div of absolute positioned (banner) div in css. This might be the reason of content div pushing upward. Since parent of absolute positioned div don't draw height automatically or by absolute positioned content, and collapsed to its minimum height.
So you might need to define certain height of your parent div in your css in order to make it cover the height area of your absolute positioned div.
Also since your content div would (probably) have normal content (not positioned absolutely) it would be drawing height like a normal div with them. And so footer div couldn't push upside beyond its height.
This should fix your issue.
Related
In the CSS Positioned Layout Module Level 3 (Working draft) in chapter 6.2. Sticky positioning we have this definition:
(Emphasis mine)
A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.
What are these scrolling boxes?
Further down the document there is an issue about the term scrolling boxes
Issue 6 Sticky positioning should really be defined in terms of the nearest scrollable ancestor, but there is currently no such term defined elsewhere in CSS. CSSOM View refers to "scrolling boxes." CSS Overflow has yet to pull in the relevant text from CSS Box, and CSS Box has an old, confusing definition of "flow root" which is almost (but probably not quite) what we want here. This spec refers to "flow root," since that’s the closest thing currently specced somewhere, but this is not optimal.
Does anybody know, where I can find further information (this draft is from May 2016)? I especially want to switch on or off, if a box is a scrolling box or not.
As #alex said a scrolling box is a box where the value of overflow is set to a value different from visible (the default one). I cannot confirm but I concluded this based on this previous answer where overflow is creating some issues with sticky element.
As I explained there, if you have an element with overflow:hidden as an ancestor of the position:sticky this one will stop working because its offset will be calculated based on that box (with overflow:hidden) because it's the nearest ancestor with a scrolling box. Since we used hidden we cannot scroll this box so we cannot see the sticky behavior.
Here is a basic example:
.wrapper {
height:200vh;
border:2px solid;
}
.wrapper >div {
position:sticky;
top:0;
height:20px;
background:red;
}
<div class="wrapper">
<div></div>
</div>
In the below example, the viewport will be used for the reference because we have no scrolling box. Now let's add overflow to the wrapper:
.wrapper {
height:200vh;
border:2px solid;
overflow:scroll;
}
.wrapper >div {
position:sticky;
top:0;
height:20px;
background:red;
}
<div class="wrapper">
<div></div>
</div>
Now our sticky element will consider the wrapper for the reference but since we don't have any overflow, we won't have any scroll so there is no way to trigger the sticky behavior. Also scrolling the viewport will do nothing.
If you add some overflow by adding another element inside we can trigger the sticky behavior:
.wrapper {
height:200vh;
border:2px solid;
overflow:scroll;
position:relative;
}
.wrapper >div {
position:sticky;
top:0;
height:20px;
background:red;
}
.wrapper > span {
position:absolute;
top:100%;
height:50px;
left:0;
right:0;
background:blue;
}
<div class="wrapper">
<div></div>
<span></span>
</div>
We can clearly see how the scroll of the wrapper is controlling the sticky element and the scroll of the viewport is doing nothing thus we can conclude that our wrapper is the the nearest ancestor with a scrolling box
Considering the last issue in the specification we can also read that:
Sticky positioning should really be defined in terms of the nearest scrollable ancestor, but there is currently no such term defined elsewhere in CSS. CSSOM View refers to "scrolling boxes."
So probably a scrollable ancestor is the same as an ancestor with a scrolling box.
I want to make a div that follows the viewport. I am not able to use fixed positioning. For some reason the div doesn't follow the viewport properly, it always 'lags' behind, especially when changing scroll direction. You can see what I mean on plunker here.
That is the first part of the problem. The second is that I need the div to immediately move into the viewport when it appears. (Clicking anywhere in the output panel in the plunker will toggle the div to appear). The *ngIf part of the appearing is important because in my actual app I am using a component with entry animations instead of a div, so no [hidden] I'm afraid.
So why can't I use fixed positioning?
Basically, fixed positioning causes the element to calculate the width differently to its sibling elements when the viewport contains scrollbars. I also can't use the overflow: scroll trick on the element because it has shadows that get clipped by the viewport. It also looks ugly having two scrollbars.
Here is a fixed centered div in a wrapper using flex.
Demo Here
#wrapper{
position:absolute;
width:100%;
height:100%;
position:fixed;
display: flex;
justify-content: center;
}
#my-app{
position:relative;
width:50%;
height:50%;
background-color:green;
}
<div id="wrapper">
<div id="my-app">
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
Im trying to center a (pumpkinvector.jpg) image inside a .div using this classic trick:
.pumpkin{
position: relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
It seems to work fine on the very bottom div where background is red.
However, that was just a test, it is not were I need the image to center.
I need to center pumpkinvector.jpg image up top in "grid2" div that inside "grid 6 october" div. October div has additional code and inner class to give background image and make it resize proportionally in height and width %. Using the same centering code above, the pumpkinvector.jpg now flows to the next line and starts to position outside of the .october div. Can someone why this is?
Please bear with me here. I thought the addition of images helps you visualize my problem so I uploaded to my own site instead of js.fiddle.
Here is the link:
http://jingsportfolio.com/october.html
Please view source to view code. Thanks.
This question is different because it asks how to center div in the context that its parent div has complex markup that makes any traditional centering off and throws in on a new line below parent div.
Check this little example probably will be useful, how to center a image inside a div
The html code:
<div class="parent">
<img src="http://45reu03dndd711szsx3satxn.wpengine.netdna-cdn.com/wp-content//uploads/2015/08/Top-10-best-CSS-development-tools-2015.png"/>
</div>
The css code:
.parent {
text-align: center;
width: 100%;
border: 1px solid #ccc;
}
img .picture {
width: 40px;
height: 40px;
}
This code is running here
Horizontal alignment is really easy with CSS:
the item you want to align has to have "margin: auto"
And the item wrapping has to have a fixed width.
Vertical alignment is a little more tricky:
This trick only works if your wrapper has a fixed height and your content to align is a textual tag like span or p or h1
use the line-height css attribute of the wrapper andset its value to its own height and it's done.
OR
if your content to align has a height of 300px use margin-top: calc(50% - 150px)
change 'margin-top' for absolute "position" and "top" attribute if needed
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;