Look at this example
The html does not respect min-width as long as we have float:right in the CSS rules
.right {
float:right;
background:blue;
min-width:400px;
}
If removing the float:right or changing it to float:left, then the html element will not be narrower than the min-width.
How we can use min-width for an element floated right?
Screenshot: As commented by some fellas, this is what I see on the latest version of Chromium on Debian.
As you can see the left side of the div including its content is invisible (in other words, outside the visible part).
The right-floated div is doing just what it is told to in the original example: it is remaining at least 400px wide. If the viewport is reduced to less than 400px, part of the div is obscured, because it's not allowed to get any narrower than 400px. So the question is, what behavior do you really want here? Perhaps what you really want here is a non-floated wrapper element that has a min-width of 400px?
EDIT: Here's an example of how a non-floated wrapper will make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body {
background:red;
margin: 0;
padding: 0;
}
.wrap {
background:#e7e7e7;
min-height: 600px;
min-width: 400px;
}
.right {
float:right;
background:blue;
min-width:400px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="right">
TEST
</div>
</div>
</body>
</html>
The wrapper could of course be colored red. I just made it gray so it was easy to see.
div is a block level element, by default it will take up 100% space..
Alternatively if you want to see only 400px element instead of 100% width you can use display: inline-block, or specify a fixed width to it.
Demo
Note: If you don't want to use display: inline-block; you can just keep it the way it is, if you minimize the window, you'll see a horizontal scroll bar so if you think that using min-width will only show element with a width of 400 px than you are wrong, it is min and not max
Related
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%)
I hope the title is not very confusing. As you can see in the example below, there are an outer div and an inner div, I set a margin-top:100px to the inner div. In the "margin area" we can't see the background of the outer div by default. But if you add overflow:hidden to the outer div, the background appears. Can someone explain why this happens?
I hope I have made myself understood here because I'm not a native English speaker.
$("button").on("click", function() {
$(".outer").toggleClass("hidden");
});
div.outer {
background: red;
width: 100px;
}
div.outer.hidden {
overflow: hidden;
}
div.inner {
margin-top: 100px;
background: blue;
height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<br>
<button>toggle</button>
</body>
</html>
I believe this is the result of something called margin collapsing.
Essentially, without the overflow, the browser is collapsing the margin-top of the inner element with the margin-top of the container. It's a crappy thing.
When you add overflow, or absolute positioning, or float, the browser's collapse effect does not take place.
From the MDN:
These rules apply even to margins that are zero, so the margin of a
first/last child ends up outside its parent (according to the rules
above) whether or not the parent's margin is zero.
"A margin needs something to bounce on. Since the parent div has nothing to bounce on, it will bounce on the element above it."
Therefore you should use padding instead of margin. Or set the overflow of the outer div to hidden or auto.
If I set the max-width css style on the body tag and a image inside the body is wider than the max-width of the body, the images will not obey the max-width. I want the image to resize, not just hide the overflow.
Why?
And how do you fix this?
Fiddle: http://jsfiddle.net/pRMzs/
max-width is not inherited automatically.
If you want specific tags to inherit the style width, you have to specify it explicitly to do, like this:
body
{
max-width: 200px;
}
img
{
max-width: inherit;
}
EDIT: Here's the link to the spec http://www.w3.org/wiki/CSS/Properties/max-width
Images do not scale according to the parent max-width size. You need to scale the images themselves to fit inside the content, making them inherit the parent width, or setting the max-width:200px;
If you do not want to scale pictures, but do not want the parent element to stretch, just use overflow:hidden and the extra portion of the image will be hidden.
As a rule of thumb, setting width (especially max-width) on the body tag is bad practice for reasons I won't go into here.
In this case, it's the choice of using the body tag to define width that is causing you headache.
Here is my jsfiddle: http://jsfiddle.net/pRMzs/17/
The only way to get the effect you are looking for is with a #container div of some kind (the CSS just can't target the body tag).
For the sake of making the answer visible on stackoverflow...
EDIT: The request was made that the image flow to 100% the size of the container. Just add width: 100% to the image. Give it a special class to avoid this effect on all <img>'s
the HTML you need is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="container">
<img src="http://www.prepolino.ch/sprache/trennen/bilder/test.gif">
</div>
</body>
</html>
and the CSS:
body
{
}
#container {
padding: 10px;
max-width: 200px;
overflow: hidden;
background: red;
}
img {
width: 100%
}
I have a div whose width and height are some fixed percentages of the browser-window, say 70% and 80%, with certain min-width and min-height. I want this div to be displayed both vertically as well as horizontally centered in the browser window. As the browser window is resized, I want the div to automatically resize and also keep itself in the center.
Firstly, it is not a div of fixed width or height, so I cannot use absolute positioning with negative margins. I have used the usual position: static and set left and right margins to auto for the horizontal centering. This ensures automatic resizing and centering with browser window resize only in the horizontal direction. This kind of thing doesn't work for vertical centering. And I can't use negative margins for that as the position is not absolute (I need it to be static for the horizontal).
I saw here and here on StackOverflow that there could be a solution for variable-size divs by using display:table-cell. Is there preferably any other solution, maybe slightly simpler, using only some setting of position, margin etc.?
Here's the demo site where I want to apply this layout.
Thanks a lot in advance!
You could also try something really simple like:
<head>
<style type="text/css">
body, html {
height:100%;
margin:0;
}
#div1 {
height:10%;
}
#div2 {
background:#F00;
height:80%;
margin:0px auto;
width:80%;
}
#div3 {
height:10%;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
Of course this technique needs to extra divs, which makes it not-so-very-sexy - but i'm quite sure it's pretty cross-browser safe...
I am having a bit of a nightmare with the CSS on a page that I am working on. I have two div tags a header and a main content the header is set to a height of 250px and the main is then set to a height of 100%. I have also set the height on the html and body to 100% as well in order to satisfy the issue with a container set to 100% in the page.
The issue is that I now have a page that exceeds the size of the browser and show a scroll and I do not want to remove the scroll bar because the page may exceed the size of the browser.
HTML CODE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page Height 100% Issue</title>
<link href='../style/test.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div class='head'>Header</div>
<div class='content'>Main Content</div>
</body>
</html>
CSS:
html {
height:100%;0
}
body {
height:100%;
}
div.head {
width:100%;
height:250px;
}
div.content {
width:100%;
height:100%;
}
Can anyone help me to get this all on one page set to the maximum size of the page without scroll bars, height 100%.
You're setting a height of 100% on div.content, which will take up 100% of it's container element (body). So the height of body overall will be 100% + 250px (the height of div.head), which is not what you want.
Adding a containing div and setting the height on that would be the best way to go, I've tested this code and it seems to work:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page Height 100% Issue</title>
<style type="text/css">
html {
height:100%;
}
body {
height:100%;
margin:0;
}
div.head {
width:100%;
height:250px;
}
div.container{
height:100%;
}
div.content {
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class='head'>Header</div>
<div class='content'>Main Content</div>
</div>
</body>
</html>
Unfortunately when it comes to heights, the 100% does not automatically expand to fill the remaining height of the page after the 250px high header division is created. The height is set to actually 100%, on top of the 250px. So the header division is probably appearing at the height of your window, then the header is pushing it down 250px.
By default, the body should also have a margin (8px). I don't know if they changed that for HTML4 or XHTML, but that's what it was for HTML4. Keep in mind that the height of an element does not include the margin and padding for the element, they are added together in the end.
You should be able to put them both into another division at height 100% and make it work properly, but you'll most likely find that the page still extends past the screen by 16px because of the margin on the body.
A suggestion: don't worry about a 100% page height. When your website is 'finished' there should be enough content on it where you won't need to be dealing with 100% page heights anyways. If not, then you should consider combining pages so that they do reach the bottom of the window. If you need some filler text for testing it, try Lorem Ipsum. I still have yet to run across a real scenario where someone has actually needed a 100% page height for their elements.