1-What's the difference between simple(width and height) and max/min(width and height)? Explain in terms of what will happen if the content, width and height of the element, for which (width and height) or max/min(width and height) is already specified in an internal style, grows more than the specified ones?
2-Secondly, how do we know which one to use when?(simple or max/min)
3-In the following example:
<html>
<head>
<style type="text/css">
p
{
max-height:50px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
</p>
</body>
</html>
Here, the max-height seems to have no effect on the content of the element as it's height grows and shrinks with the content in it?. Iam currrently using IE8.
Answers:
1: Please see below for the difference between simple and max:
#element {
width: 100px;
height: 100px;
background-color: red;
}
<div id="element">
I'm a 100px wide, 100px high block!
</div>
The div above will be a 100px high and 100px wide red block on the page with the text 'I'm a 100px wide, 100px height block' inside it. If the text were to long for this block it would either leak out or if you put overflow: hidden in your css for the element, the excess content would be hidden.
If instead you did this:
#element {
max-width: 100px;
max-height: 100px;
background-color: red;
}
<div id="element">
I'm a flexible block!
</div>
The element would be as large as your content but if your content ever reached 100px high or over the element would stop and it would do the same thing as the above example (either cut the content off if you have overflow: hidden in your css or the content will leak into the page from the element).
2: If you want a big red block on the page or. use width/height, if you want a small red block on the page that needs to grow but only grow to a certain size use max.
3: There are two types of elements inline and block, setting height and width (max or simple) will do nothing on an inline element (which a p, in your example, is not). You can set it to block in your css by adding display: block to the p css or use a div instead (which is block by default).
Related
I have an HTML page and its width is limited. Also, a table on that page so the width of the table limited by the width of the page. Then I have several columns in that table the width of the column is calculated automatically. If the width of the column's content (let's say these are text strings without breaks) is bigger than the width of the page then part of the strings will be hidden. I want to forbid hide the content for some particular column. In other words, I want that column takes as much width as it needs and the other columns split the rest of the space among them.
How can I do it?
a block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
Setting the width of a block-level element will prevent it from
stretching out to the edges of its container. Then, you can set the
margins to auto, to horizontally center the element within its
container. The element will take up the specified width, and the
remaining space will be split equally between the two margins:
source: https://www.w3schools.com/css/css_max-width.asp
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width:500px;
margin: auto;
border: 3px solid #73AD21;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>
I am absolutely new to HTML & CSS and trying to learn it, hence this question. My target was to create a responsive image which doesn't exceed the original size of the image. Found some info on this question and I was able to do it by putting the image in an inline-block which is in a div (see the code snippet), but it doesn't answer a fundamental question. How is the responsiveness working.
For the case when the viewport is larger than the image, my HTML code makes sense i.e. the width of the image is 100% which means take the size of the parent container. In this case the parent container is inline-block whose size is actually the size of the content it's enclosing, so 100% means the image will be displayed with it's original size.
But when I resize the browser window to a smaller size, the image resizes with it. Here I am not able to understand the mechanism of action. As per my info (which is limited as of now) the inline-block always takes the size of contents it's enclosing, then how come it's resizing when the outside container is changing it's size.
Is it something that inline-block will take the size of the content TILL it's fitting in the parent container BUT as soon as the parent container is not sufficient to fill the inline-element, the inline-element will resize to the parent container and NOT the content it has in itself?
P.S. - My first question on Stack Overflow.
.container {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.responsive-image {
width: 100%;
max-width: 1920px;
}
.inline-block {
display: inline-block;
border: 2px solid purple;
padding: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="inline-block">
<img class="responsive-image" src="https://drive.google.com/uc?authuser=0&id=0B3Fs1er7k9QAQUU1bzhqYWMxeUU">
</div>
</div>
</body>
</html>
width: 100% means its width depends on its parent.
.inline-block {
display: inline-block;
border: 2px solid purple;
padding: 3px;
}
This is a class if it will be applied on a ny div then all the elements with this class will shown inline with there side one.
width:100%;
Is something related to the total width and here total width means as much as the size of its parent div. If the size is changed something to 700px it will take 700px because of the code refers that whatever the parent div has, take that.
Some basics first:
First you need to understand what is inline(Reference: Inline element) and what is block (Reference: Block element)
Block element: A block-level element always starts on a new line and takes up the full width available i.e. 100% width(stretches out to the left and right as far as it can).
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
Inline element : An inline element does not start on a new line and only takes up as much width as necessary.
Examples of inline elements:
<span>
<a>
<img>
I think, by now you can get the idea what is inline-block means then ?
inline-block: Any element with inline-block will be displayed inline and will take 100% of width available to it like what block element takes. Therefore, if there is any inline element with width say 30% is already available and now you apply property: display as inline-block, then whole of leftover 70% width will be taken. Here, leftover 70% is actually width 100% for inline-block
Here is the reference.
I hope it helps.
When you set image in width: 100%, it will fill the width of the container where the image belongs. Even though how much width the container has.
If you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (if you specified box-sizing:border-box, in which case only margins are added to the 100%)
There is an inline-block element with 100% height and width :
<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>
Why doesn't this div take up whole height, but takes up full width?
An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.
The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.
The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.
Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.
It takes height of its parent
try:
html,body {
height: 100%;
}
That's because a div by default takes full width, unless specified otherwise.
Making it inline-block, just allows it to be inline, but preserving its block nature such as setting width and height, top and bottom margins and paddings.
And the height of every element(not-null) in html markup is same as height of a line.. which can be changed by line-height property.
And if you wish it to take all-height, follow the above answers.
Because your html and body tags don't take full height.
Unless specified otherwise, block elements take full width, but only as much height as needed - it is only natural, since HTML was originally meant as a way to format text documents. You wouldn't want, say, a paragraph to take the full window height.
You must set their height to 100% to get it work - stretch them to the window height:
html, body {
margin: 0;
padding:0;
height:100%;
}
http://jsfiddle.net/gdyLs/1/
You need to specify height to html and body then only that div will take 100% height
html, body{
height: 100%;
}
If I have the following markup
<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>
with the following styles
html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}
why does not my html, body and wrapper elements extend to 100% height of the browser/view port in FF13. The html, body and wrapper stop vertically about some distance from the bottom when looking in Firebug. The container div extends to the full height as it's height is determined by the content.
(1263px X 558px for html, body, wrapper) and (960px X 880px for container)
Looking at default 100% the above happens as the first image below shows. But when I zoom to the last poosible zoom in, the above does not happen as the second image below shows and the html, body, wrapper extends to the full height.
(4267px X 1860px for html, body, wrapper) - (960px X 1000px for container)
Your html actually exactly extends to 100% height of your viewport cause viewport here is the browser window, not the inner content.
Consider this (jsfiddle):
<div id="div1">
<div id="div2">
<div id="div3">
very much content
</div>
</div>
</div>
#div1 {
height:300px;
overflow-y:scroll;
border: 1px solid black;
}
#div2 {
height:100%;
}
#div3 {
height:600px;
}
div1 here has the height of 300px and is scrolled. When you scroll content you simply move inner div but height remains untouched that is 300px. Exactly the same happens when you set height:100% to html. Your browser's height remains the same.
When you zoomed out your viewport then you have not scroll, so inner content's height is less than the height of viewport.
Shortly, html {height:100%} relates to parent's height not to the height of the inner content
UPDATE:
you can specify 3 types of values to the block-element's height:
length - set fixed height (i.g. '200px', '50em'). That's all, I can say nothing more about that.
percentage - from W3C spec:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.
auto - The height depends on the values of other properties. (Generally on the height of inner content: text, other inline elements, block elements etc.)
What is happening when browser shows your page:
it gets height: 100% for <html>. That means that the resulting height is calculated with respect to the height of the generated box's (html-element in that case) containing block (initial containing block, i.e. browser window in that case). Let's say 1024px.
then it takes height: 100% for <body>. It will set body's height to the already calculated height of the html, that is 1024px.
then browser applies height:auto to the #wrapper and then the #container and the <p>. I don't know how it does that exactly but can suppose that it postpones the height setting (and respectively all other styles which depend on that i.e. backgrounds, borders etc.) and proceeds to the inner content.
next point is text content. Browser takes related properties specified or it's own, that is default styles, like font-family, font-size and the height of the text.
after that it will set height to the <p>-element so the <p> will stretch down to contain all content (the text in that case). The same then happens to the #container and the #wrapper.
If it happens that the height of the #wrapper is greater than the body's one (1024 px as it were agreed) than the overflow should be applied to the body. That is visible which is the default. Then overflow: visible is applied to the html. Then browser shows scroll for the entire window. Honestly, I don't know whether this is specified by the W3C spec, but can suppose it is.
So when you scroll the window your html and body are moved as are all the other elements. This is the same behavior as is with any other elements (like in jsfiddle I posted above):
Note that the background is set on the body element, but it extends to the entire canvas i.e. far beyond of the body element itself. This is towards your concern of the possible necessity of setting bg-property on the body. This is 100% compliant with the W3C spec which states (cutted):
For documents whose root element is an ... "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first ... "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
When you zoom out your page then browser recalculates all dimensions. Let's say, with each Ctrl + - click page shrinks, for example, for 20 %. Then all your text is reduced, cause its height depends on the font-size, which is affected by the Ctrl + - click, correspondingly <p>, #container and #wrapper all are reduced cause their height depends on text's height. But body and html both have height which depends on the window's height which is not affected by the Ctrl + - click. That is why you finally get this:
There is no difference here between width and height behavior in that case. You don't see the same issue with horizontal dimension simply because you've set width: 960px; for the #container which turned out to be less than your browser window's width, so no overflowing occurs. If the width of the #container were exceeding body's width you would see this:
This all is a normal and expected behavior and there is nothing to solve here.
Because you can never set the height to 100% if the element is relative to the browser window. The reason for this is that because of scrolling, your browser window could potentially be infinitely big. You will have to set a fixed height, or you will just have to set the height to expand to whatever is inside of it.
However width: 100%; is perfectly valid.
You will also need to use valid html tags. what I would do is, instead of using <wrapper> and <container>, I would make a class in your css. Class names are declared by starting them with a period.
.container{
width: 100%;
}
<div class="container"></div>
Good Luck,
-Brian
Is there a way to set a CSS element (div in this case) to a certain height, unless the content in it causes it to be larger? I have a CSS layout, and I want my "content" div to be at least 600px high, but is there's 700px of content, allow it to be extended.
div {
min-height: 600px;
}