Why is width:100% relative to screen when within media query - html

If I have want to have the following layout:
[----foo-----][[-bar1-][bar2]]
I.e. two columns each half the width, and then in the second column two sub-column with a 3/5 and 2/5 split, I do something like:
<div>
<div id="left-section" class="half-width">
Foo <!-- lots of content -->
</div>
<div id="right-section" class="half-width">
<div id="three-fifths-of-this-section" class="three-fifths-width">
Bar1 <!-- lots of content -->
</div>
<div id="two-fifths-of-this-section" class="two-fifths-width">
Bar 2 <!-- lots of content -->
</div>
</div>
</div>
with the following CSS
div {
display: inline-block;
}
#media screen and (min-width: 48em) {
.half-width {
width: 50%;
*width: 49.9690%;
}
.three-fifths-width {
width: 60%;
*width: 59.969%
}
.two-fifths-width {
width: 40%;
*width: 39.9690%;
}
}
Why is the three-fifths-width class computed as 60% of the screen width (and two-fifths-width as 40% of the entire screen)? It's just a regular CSS width property which should be 60% (or 40%) of the parent element and so 30% (10% resp.) of the screen in practice.
By the way I am actually using PureCSS in practice but I'm interested in the underlying CSS.
Also, I aware that the min-width within the #media query is always relative to the screen, I'm asking about a regular width or even min-width as a CSS rule within the scope of a #media query.

I am not sure how your browser renders your output, but first of all it shouldn't be anywhere near 60% or even 30% due to the fact that you apply
display: inline-block;
to all div elements.
This causes two things: (1) your divs will only be as wide as necessary to display its content and (2) whitespace between inline elements may cause unwanted effects. Therefore, your example looks like this: http://jsfiddle.net/8jrewj71/.
Note, that I have added your code twice and applied different classes to the parent div to see the difference between your CSS being inside a media query and not.
Now, if we add
.media, .nomedia { display: block; }
we get a complete different picture: http://jsfiddle.net/n4aw8pcd/
As long as the preview/result window is small enough, the media query part looks like before. However, as soon as the viewport exceeds 48em, it looks exactly the same as the part without media queries below.
Long story short: The answer to your question must be, it doesn't. width: 100%; is relative to the next parent element with a width property.

Related

CSS, Idiom for Preferred min width

I have learned from similar questions that min-width always beats max-width, which is unfortunate, because I think modern websites mostly require it the other way around.
I often have to resort to media queries to solve the below problem, but hoping there is an elegant/better solution:
Say I have a div:
<div>Words on a page. Words on a page. Words on a page. Words on a page.</div>
I often wish to have this div width to be at least 500px, as long as it's not bigger than 90% of the screen width. This can be accomplished with:
div {
min-width: 500px;
max-width: 90vw;
}
Now the problem with the above is it overflows on mobile.
I encounter this all time when I have a list of objects, and say the items are deletable, then if one deletes the widest element, the whole design jumps as it resizes. To minimize this effect, I wish to have a default width and allow it to expand in rare cases as needed.
Do it like below:
div {
min-width: min(500px, 100%); /* will take less than 500px if there is an overflow */
max-width: 90vw;
border:1px solid;
}
<div>Words on a page. Words on a page. Words on a page. Words on a page.</div>
Are you looking to set the min-width to no more than 90% of the width of the screen but if the screen is wide enough then 500px.
If so maybe try:
div {
min-width: min(500px, 90vw);
display: inline-block;
background-color: lime;
}
<div>Some text </div>

automatically decrease container width while resizing broswer window

I am using CSS and HTML trying to reproduce the homepage of this website http://www.newsweek.com/ as an exercise.
If you open the page with a large screen you will see at both sides two empty columns that gradually decreases as the broswer width is reduced.
I want to reproduce this behaviour but can't make it until the end: I have set a container class with initial width 80% that become 100% at some point thanks to media query in CSS:
#media screen and (max-width: 1047px) {
.container {
width:100%;}}
What I miss is the gradually reduction of this container. How it can be made?
Thank you very much
For an experience like that, all you need is something like this:
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
If .container is applied to a block level element (like <div>) then this element naturally goes to be as wide as it can. This just says don't go wider than 1200px, and designate the left over space equally between the left and the right.
If for some reason the element is not block level (e.g. a <span>) then simply add display: block; to the above code to make it block level.

CSS: limit image width to half page width if it's narrower than the page

I have an image floated to the left of some text:
<style>
img {
float: left;
}
</style>
<div>
<img src="anything.jpg">
<p>Lots of text.
</div>
The image could have any dimensions. I would like to do the following using just CSS, across all form factors:
if the image is at least as wide as the page, display it full width (width: 100%); and
if the image is narrower than the page, restrict its width to a maximum of half the page width (max-width: 50%).
Is that possible?
Edit
Ok, not possible is what I feared, but I really hoped I was just missing something.
I can't create CSS rules/media queries dynamically, all the content is static (in fact there's no server).
I'm wondering if there may be a kludge that's Good Enough: adding a class to the images depending on their size (e.g. .img-500 for images with a width 500px to 599px, .img-600 for 600px to 699px....), and using media queries based on those:
#media (min-width: 501px) {
.img-500 {
max-width: 50%;
}
}
Would be interested to hear if anyone has tried that, or knows of a reason that approach is doomed?
As far as I'm concerned, conditionals on width can't be done with CSS only. However you can use two classes one with width: 50% and the other width: 100% & use JavaScript to switch between them when needed:
$(document).ready(function() {
$("#image1").load(function() {
if($(this).width() < $(window).width()){
$(this).addClass("width50");
}else{
$(this).addClass("width100");
}
});
});

Different layouts for different screen's width

I am working on a webpage, and I want to use JavaScript to center some text (contained in a "p" with the display:inline-block attribute) when the text is shifted under everything else (on a smaller window). When the window size is big enough, I have the text on the right of the screen (where I want it for larger windows).
Basically, I have content on the left and right of the screen for bigger windows, but I want that content to become centered and vertical when the browser is smaller.
I've tried using .addEventListener() but my JavaScript knowledge is pretty limited.
Any thoughts? Does this make sense?
I see you're trying to do some sort of responsive design. You're better off doing this without any javascript.
You should look into Css Media Queries, that are meant to set specific css styles depending on the screen size:
#media screen and (max-width: 500px) {
Similar to your scenario, here's a sample showing the concept: http://jsfiddle.net/xkJ3G/
Resize the window and test it!
You can achieve desired effect using only HTML and CSS.
JSFiddle
HTML
<div class="outer">
<div class="A">A</div>
<div class="B">B</div>
</div>
CSS
div.outer {
width: 100%;
text-align: center;
}
div.A,
div.B {
width: 40%;
min-width: 250px;
display: inline-block;
}
Linebreak will be when width is lesser than min-width (in this example when 40% < 250px)

How to limit a content DIV height to its container height, with percentage?

I've the following part of HTML structure (closing tags omitted for simplicity, indentation represents nested tags):
...
- <div class="main-content-wrapper">
- <div class="item-image-wrapper">
- <img class="item-image fit">
- <div class="item-text">
- <h2 id="itemTitle">
- <p id="itemContent">
with the following CSS
.itemdetailpage section[role=main] article .main-content-wrapper {
display: -ms-grid;
-ms-grid-rows: auto auto;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image-wrapper {
-ms-grid-row: 1;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image {
margin-top: 0px;
margin-left: 0px;
}
.itemdetailpage section[role=main] article .item-image.fit {
/* Fit image to page size */
max-width: 100%;
max-height: 100%;
}
.itemdetailpage section[role=main] article .item-text {
-ms-grid-row: 2;
margin-right: 5px;
}
The goal is to have the IMG no taller (and no wider) than the main content allows, i.e. to fit the main content space if bigger than that, or to stay at its original size if smaller. The text can just flow below the image, and so can also go below the fold, no problem with that. This should happen with no JS code, CSS only.
When the item text is narrower than the image, it's all ok. The image wrapper is some pixels taller than the image, don't know why, but it looks ok.
The problem I see here is when, at the same time: the image is taller than the available height, and the item text is wider than the image (the item title, in particular). In this case the image wrapper gets taller than its container, and so follows the image. E.g. .main-content-wrapper receives a (correct) height of 900px, but item-image-wrapper is 1024px tall and image is 1024px tall (its natural height).
I know this 100% DIV height has come again and again, and I've looked for answers, but I was not able to find one suitable for this case.
EDIT:
I've found this SitePoint reference, the paragraph where it says "Percentage values refer to the height of ...": does anyone know anything about this rule?
One thing you can do to achieve this in certain situations is add width: 100% and height: 100% to every intervening element, and rely on the text extending out of its containing block if the image takes up all of the available space. This won't work in every situation because it's then very hard to get anything else on the page to make room for the extending text, but on a vanilla HTML page containing nothing else it works, and it might be possible to make it work in some other situations by putting a floated element at the end of the text content and putting a clearing element in any spot that needs to come after that text content, as in this jsFiddle: http://jsfiddle.net/t6LvY/2/
As the design accumulates complexity this could get nasty fast, however. You're probably better off just going with a bit of JavaScript to set the max-height of the image to the window height on window resize.
I think you should remove max-height from image class max-width:100% is enough to fit that image to parent container of image. I don't know this will help you or not.
My own proposed (sad) answer: if I want to keep percentage heights on the DIVs, and stick to pure CSS (i.e. no JS), then the goal cannot be accomplished.
The W3C specs says that the percentage in this case is basically ignored (look for text "The percentage is calculated with..."). And also Internet Explorer docs (the browser I'm working with) says basically the same (look for text "* If the height of the containing block...*").