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%;
}
Related
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.
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 an img element with style='width:40%;height:40%;'. I would like to add a div that automatically wraps it. However when I insert the div instead of wrapping the img it just expands to the div inside.
How can I force this div to wrap img so it can be used as a frame. The reason why I do not preset the div's height and width is because img's percentages will be given dynamically, so div should wrap the img according to img's sizes.
If you do it like this
<div id="wrapper">
<img src="...">
</div>
you could add the display: inline-block; attribute to the wrapper. That did it for me. Yet still, your style='width:40%;height:40%;' will make its height being adjusted by its parent as #jesse-van-assen already mentioned.
The problem with a width and height of 40% with an image tag, is that the image isn't downscaled to 40% of it's original size, but takes up 40% of it's parent, as you can see here.
In your case, you want to wrap the image in a div, but still want to size it to 40% of it's parent. In this case, the parent IS the wrapping div. You see the problem.
If you just want to use the div as a frame, you can use css to style the image to gain a similar effect, like this:
<img src="..." style="border: 1px solid #000000; padding:10px;"/>
Example of this principle here.
make all your images float to left.
img
{
float:left;
}
and clear each div with
<div style="clear:both"></div>
as the very last element in the wrap div before it closes.
hope it helps.
I'm developing something in asp.net and finally got round to creating the UI. I made a basic <div> element to wrap the content of my body in, and I notice that it auto fills the width to 100%. I create a new .aspx page to test it in, and the same results happen. So I create the following HTML document in notepad, save it as test.html and run it through Chrome, IE and Firefox and all three are returning a strip of 20px high and 100% width with a red background. Here's the code:
<head>
<style type="text/css">
#tester
{
height: 20px;
background-color: Red;
border: 1px;
}
</style>
</head>
<body>
<div id="tester">
</div>
</body>
Would anyone know what I could have done to make this so that it auto fills div elements to width: 100% on all browsers? I guess it's possible that I'm being absent minded and forgot that div elements did this automatically, but I'm 99% sure they didn't.
Thank you kindly,
Ben
From CSS 101 (BSD/MIT licences):
The horizontal position and size of a non-floating, block-level element is determined by seven properties:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
The sum of these seven properties is always equal to the 'width' of the parent element.
So yes, you've been absent-minded! Block-level elements (such as div) automatically fill the width of their parent unless they've been told not to by float.
<div>s are block-level elements, meaning they will automatically fill the horizontal space of their parent. Unlike inline elements such as <span>, which only take up the space required by their content.
DIVS are by default 100% of their parent element. So just set the width you need.
Also note that DIVs that have a width greater than their parent will by default also be completely visible unless you set the parent element to overflow:hidden.
I'm having some trouble with my web page. A picture probably descibes it best so here it is:
http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png
The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:
#mainContainer {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 800px;
min-height: 700px;
height: 100%;
}
I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to auto:
http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png
This is how it should look (and how it does look using height: 100%):
http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png
The full page can be found here (click on "Om oss" to see the page with the misplaced text)
I would really appreciate it if someone could figure out what the problem is! :-)
(Hopefully the CSS and HTML is easy to understand)
Edit: I just noticed that it renders properly in Safari, but not in Firefox.
You have given html and body a height of 100%. (Many child divs also have height:100%.)
What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.
Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.
You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!
Stian,
For the div #mainContainer, set the height to auto.
For the div #mainContainer-middle, set the height to 550px.
That should fix your layout issues.