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/
Related
Here is the prototype I am trying to implement
Here is what I have right now.
I learned from my previous question Side to Side How to align the column of options with the picture - using display inline block attribute- Display.
Now I am trying to align the picture so the picture doesn't stretch past the entertainment option like in the prototype. Here is JSFiddle
Seeing that a block element like div "occupies the entire space of its parent element" - Block Element, the Css Height attribute made the most sense to me to use here.
Here is my code for setting height in both the image and the div containing the image
The div
.sidebar {
display:inline-block;
vertical-align:top;
width:70%;
height:3%;
}
The image
#laptop {
width:100%;
height:3%;
vertical-align: bottom;
}
The 3% was just a hardcoded test value but in both instances, the height of the image didn't change. I saw another thread on this - Height Thread but that one said to adjust height as well.
Does anyone know to scale the height of the image in this situation?
How I solved this issue was I realized that by definition, a div is a block element that "will expand naturally to fit its child elements".
So going off that, I played around with the css width and height attributes and found a height that would cause the image to line up with the entertainment component.
If anyones curious, here is my final img html tag code(height of 240 pixels)
<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" />
Taking a shot in the dark without looking at all the code. How are you creating your image, in an <img src=""/> tag or as the background of a div via the css attribute background:url("image.png");? The height and width percentages reference the dimensions of that elements parent element. I'm going to assume that your image has no parent element/container, or that the parent/element container is not set to specified height. Therefore your element is referencing the Viewport who's height attribute is automatically set to auto. Set your HTML and Body elements height attribute to 100%.
html,body{
height:100%;
}
Why does setting an element to be position:fixed change its width? I know that HTML elements by default span the entire width of the browser window, but when I set the position on my header to be fixed, the <div> shrinks to zero width. Why is this?
Trying width:auto does not fix it, the <div> still has zero width!
This example is taken from Code Academy "Build a Resume" project at the end of their Web Fundamentals course.
I have an HTML file like so:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
and a CSS file like so:
div {
border: 5px solid red;
border-radius: 5px;
}
#header{
height:30px;
background-color:orange;
z-index:1;
}
#footer{
height:30px;
background-color:teal;
clear:both;
}
.left{
height:300px;
width:200px;
float:left;
}
.right{
height:300px;
width:200px;
float:right;
}
UPDATE: I noticed that setting width:100% does keep the width all the way across the browser window. What is going on here? I've read Why does fixed positioning alter the width of an element? but am not sure how that applies here.
Edit: Thought I would move this up from the comments and try answering it here, to give more direction on where I'm confused:
"Yes, it seems like "Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block" is the key part. So I see that position:fixed will set the dimensions of my relative to the viewport, but isn't the viewport the whole browser window? So why does its size collapse to zero? And beyond that, why does width:auto not fix it but width:100% does make it span the whole horizontal length again?"
width:auto is different from width:100%. width:auto will expand the width of the element to all horizontal space within its containing block. Since the space is on the inside of the containing block it doesn't count borders/padding/margins.
width:100% does what width:auto does and adds the width of the borders/padding/margins of the containing element. difference between width auto and width 100 percent provides a good visual demonstration.
So, when I set width:auto on my position:fixed element, and the position:fixed shrink-wrapped the element's width to be that of its content (which was nothing), then the width automatically adjusted to be that of the containing element, which in this case was _________ (what? and why did it have a width of zero?).
When I set it to be width:100% then it includes the padding/margins/border of _________ (what? and why did it expand to cover the whole page horizontally?).
The reason is because both fixed and absolute positioning take the element out of the flow of the document. The residual effect of this is that, unless explicitly told otherwise, the element will now grow/shrink according to the size of its content rather than the size of its parent.
As you've already discovered, a simple fix is to give it a width of 100 percent:
.fixed-element{
position:fixed;
width:100%
}
To address the issue of the quote on fixed positioning:
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.
I actually find it to be quite poorly worded. It's not meant to say that the dimensions will grow to the size of the viewport. Instead it's trying to distinguish the specific differences between absolute and fixed positioning. More thoroughly put: the dimensions/size of the fixed element will always be relative to the initial element. Whereas the dimensions/size of the absolute element will be relative to the containing element. That doesn't explicitly mean that it will actually take 100% of the viewport by default...
This is the default behavior.
Read http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Specifying_dimensions
Absolutely positioned elements will shrink-wrap to fit their contents
unless you specify their dimensions. You can specify the width by
setting the left and right properties, or by setting the width
property. You can specify the height by setting the top and bottom
properties, or by setting the height property.
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%;?
I was fiddling with my web-app to try and get a div to wrap around some p elements. The structure looks like this, i.e. pseudo-code ...
<div id='outer'>
<p></p>
<p></p>
<p></p>
</div>
What I found is that if I set the outer div to
position:absolute;
instead of
position:relative
that the div would correctly wrap around only the p elements.
Otherwise it would extend all the way to the very right of the page, and I had previously had to set the width manually.
What is governing this behavior?
Also, the p tags use
display:inline
and the containing div just uses the default display.
This CSS below works well in my app.
// outer div
#mi_control {
position: absolute;
left: 580px;
top: 660px;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
}
// p elements
.menu_bottom {
margin-left: 18px;
display: inline;
}
This is a common issue..
I quote:
Question: relative div takes 100% width automatically but absolute div only takes content width. why?
Answer: Setting position:absolute removes the element in question from the normal flow of the docment structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.
By default, a div element is set to display: block;. Block elements will be 100% of the width of the parent element.
When you set an element to position: absolute; it takes it out of the document flow and the element is no longer sized according to the parent element. It can mess with your layout though.
My recommendation is to set the div element to display: inline-block; - this will make it sized as per its contents, but will not remove it from the flow of the document.
#outer
{
display: inline-block;
}
I don't know exactly what rules governing this behavior but what you observed is the right behavior and is consistent across all browsers. A DIV takes minimum width when its position is set to absolute or fixed; otherwise it takes full available width.
The default value for width for a div element is auto.
This means that it will take up the full with of the available space, or more if the contents forces it to. If you use position: absolute however, you take the element out of the document flow. As there is nothing that it can relate to as the full width any more, it will use the width that the contents forces it to use.
The behaviour is governed by the spec. Absolute positioned elements have dedicated rules about how widths are calculated: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width and http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
Once it is set to absolute, it is taken out of the normal flow of content. Absolutely positioned elements always appear in the top left corner, unless otherwise specified. The element will also shrink to be only as big as it has to, because that's how position:absolute works
divs naturally have a width of 100%, so that is why you have to set the width manually. Relatively positioned elements behave almost identically to statically positioned elements. The only difference is how they can be moved
Not sure what you are seeing but even if your div is positioned absolutely, it will STILL wrap your P tags
http://jsfiddle.net/8MSDH/
you are seeing it at the bottom right because you set your top and left
left: 580px;
top: 660px;
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.