An element is positioned absolutely and is made to full width using the left and the right properties set to 0
The problem is, when the window is zoomed, the element is made full width only to viewport. The below images explain the problem in detail
Is there any CSS hack to fix this issue.
JSfiddle to test: http://jsfiddle.net/vaakash/kdgJp/
You can do the following:
body {
position:relative;
float:left;
}
#header {
width:100%;
}
http://jsfiddle.net/PNaSz/
This will make sure the absolute element orients against the body in width (because its positioned relative), float:left will make sure the body is as wide as the content.
Is there a reason you can't use width: 100%;?
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
Goal
I would like to position an element absolutely.
Issues
Oddly, said element somehow appears as if it were position: fixed. Weird!
html, body {
height:100%;
}
.absolute {
position:absolute;
}
This creates an element that acts like it is fixed on the page.
This is very puzzling and inconvenient. Here is a JSfiddle.
Help
Is there a way that I can add absolute positioning to this element without changing html and body height?
One last thing to note: In my case, the content inside the body overflows window height, if that's important...
Thank you for your help!
edit: Changed title slightly, removed unneeded interjections.
First let's understand how position:absolute works.
absolute position removes an element from the normal flow of the document and places it relative to the first parent that has relative positioning.
The default value of position property is static. So the class .absolute has no parent that is relatively positioned. Therefore it stays relative to the viewport and appears all the time even when you scroll.
So set a parent element of .absolute to relative positioning and you will get the desired result. Here, you can set the .element to relative positioning.
.element{
width:100%;
height:2000px;
position:relative;
}
You can open the fiddle below and scroll to see the desired effect.
Fiddle - jsFiddle
by default position absolute is relative to the body beacause the absolute element is out of the elements flow. So if you want your absolute element to be abble "to understand" the other elements and be abble to move width parent, it's parent should be in relative position.
regardless to your JSFiddle put a position relative to .element the .baby should be abble to move with it parent
.element {
width:100%;
height:2000px;
position:relative;
}
I have some questions regarding the following css that I found:
html, body {
height:100%;
min-width:100%;
position:absolute;
}
html {
background: none repeat scroll 0 0 #fff;
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:15px;
}
is it necessary to have height and min-width to 100% on the html and body? What's the benefit?
what is the reason for using position absolute?
why did they set the background/color/font on the html and not the body? Is there a difference? Or is it just preference?
It's usually unnecessary. However, there are a few times where you may need it. For example, maybe your base/site-wide website css file specifies the size to be different (you know those sites where the sides are just borders, usually blogs? Those widths have been resized down). Note that when you have percent it's of the parent container. So Div A may have width: 100% but if it's parent container has width: 500px Div A will have 100% of 500px.
There is no reason for position: absolute on the html + body that I can think of. One side effect of absolute positioning is that the element nolonger "floats inline" with the rest of the elements (not sure how you would describe/word this).
For example, position: relative ignores absolutely positioned elements. So if you had Image A (absolute) and Image B (relative) and B had left: 10px;, Image B would be offset from the left of the parent, instead of where A would have been. Hopefully I'm making sense here.
So sometimes I just set "position: absolute" whenever I have a background image. If it's the first child, it everything will show up on top of it (since the new elements are "added on top" and ignore the absolute-positioned element).
The body will inherit those properties, and so yes it's just preference.
Setting the width or height of an element to 100% only works when its parent element is also at 100% of that dimension. Which means that if the body or even html tag isn't, for some reason, at 100% of either height or width, an element inside it with those properties will have 0 height or width.
For example: http://jsfiddle.net/KZaum/
I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.
I want to display a children element of my html page all over the browser window.. in other words I would like to enlarge it and keep it the same size the browser window also when it is resized after loading.
I was wondering if I have to move this object outside the parent elements or I can set these properties with css.
At the moment if I set width:100% and height:100%, it fits the parent (of course) and not the window.
thanks
It is typically better to use relative positioning when possible, and any large child elements should be equal to the parent. But you can always absolutely position it:
position:absolute;
width:100%;
height:100%;
left:0px;
top: 0px;
width is easy:
width: 100%;
for height, you need something like this:
100% Height Layout Using CSS
Width always aplies regarding to the parent element. You could use absolute positioning to have that particular element "out" of it's parent (regarding positioning and flow, that is), and set it to 100%. Be carefull though, it might no end up where you want it to be visually.
.someElement {
position: absolute;
width: 100%;
height: 400px;
}
The parent element cannot have "position:relative" specified for this to work.