Develop Reference

How to shrink a from a max-height to a min-height over the size decrease of the viewport width?

If I have a body element and I decrease screen size, it is a 1:1 ratio.
If I have an body tag at width 50%. its a 1:1 ratio. Every pixel decrease of the viewport directly effects the width of element.
If I have 2 Elements side by side. I want to have the first element (.left) start at a width of 400px, at a screen width of 1300px, but increase a total of 100px over the course of the screen increase to 1920px.The second element (.right) will fill the rest of the space and decrease at the according rate of the screen +/- the current width of .left
.right
1300px -> 1920px
400px -> 500px
.left
width:100%
I know this doesnt work but this is the code I've got so far.
.full{
background-color: lightblue;
width:100%;
height:50px;
}
.half{
width:50%;
height:50px;
background-color:grey;
}
#flex{
display:flex;
}
.right{
max-width:500px;
min-width:400px;
height:50px;
background-color:lightgreen;
width:70%;
}
.left{
height:50px;
background-color:lightpink;
width:30%;
}
<div class="full"></div>
<div class="half"></div>
<div id="flex">
<div class="left"></div>
<div class="right"></div>
</div>

I'm assuming the wording in the question is what is required, i.e. the left element is to have a min value of 400px, a max value of 500px and is to increase in size from the min starting at body width 1300px and stopping at 1920px.
left therefore needs to be set to have a min-width: 400px and max-width: 500px
We need to calculate what the width will be to increase by 100px between the given start and end body width values. The formula for this is:
s + (i / d) * (a - b)
where
s = starting width of left element (400)
i = increase in left width (100)
d = difference between start and end body widths (1620)
a = actual body width now (100%)
b = starting body width (1300)
The right element is to take up the remaining space so needs to be given flex: auto;
In this snippet the various dimensions have been set using CSS variables so as to make it easier to change them.
.full{
background-color: lightblue;
width: 100%;
height: 50px;
}
.half{
width: 50%;
height: 50px;
background-color:grey;
}
#flex{
display: flex;
}
.right{
height: 50px;
background-color: lightgreen;
flex: auto;
}
.left{
height:50px;
background-color:lightpink;
/* SET THESE 4 VARIABLES TO WHAT YOU WANT */
--startb: 1300; /* width of the body after which left starts to get bigger */
--endb: 1920; /* width of the body after which left stops getting bigger */
--startleft: 400; /* the start (hence minimum) width of the left element */
--incw: 100; /* the increase in the left's width when have reached the end body width */
/* we calculate some interim values just to make it a bit easier to see what's happening */
--startbw: calc(var(--startb) * 1px);
--endbw: calc(var(--endb) * 1px);
--incb: calc(var(--endb) - var(--startb));
--startw: calc(var(--startleft) * 1px);
width: calc(var(--startw) + calc(calc(var(--incw) / var(--incb)) * calc(100% - var(--startbw))));
min-width: var(--startw);
max-width: calc(var(--startw) + calc(var(--incw) * 1px));
}
<div class="full"></div>
<div class="half"></div>
<div id="flex">
<div class="left"></div>
<div class="right"></div>
</div>

html spacing issue-Keep left margin as variable right margin 0

In the resolution 520-719px,earlier i kept the content fixed as 500px and kept margin:0 auto.So for a 700px screen,content would be 500px and margin left,right 100px each.
For 600px screen,content is 500px,margin left,right is 50 each.
Now,I want margin-left to be the same (screenWidth-500)/2 and margin right to be 0.The width of the center content wont be fixed anymore,it would be (500+whatever area of right margin)
How can I achieve this.Is this possible using css.??
I tried using jquery as when window size is from 520 to 719 px,I do calculations as margin-left=(screenWidth-500)/2 and margin-right:0
Please suggest a better solution.

You can use CSS calc, like this:
( I used a wrapper to simulate a 600px window width - the red border)
.your_div {
width: calc(500px + ((100% - 500px) / 2));
margin-left: calc((100% - 500px) / 2);
margin-right: 0;
background: green;
height: 300px;
}
.wrapper {
width: 600px;
border: 1px dotted red;
}
<div class="wrapper">
<div class="your_div"></div>
</div>

Full screen width for child element of a non full screen width parent

This question builds upon that one, where in order to apply full screen width to a child of a non full width parent element, the following rule is used on the child element:
width: 100vw;
margin-left: calc(-50vw + 50%);
As shown in this Fiddle, this solution doesn't work in the presence of a vertical scrollbar though: 100vw doesn't take the scrollbar into account and hence the child element ends up being wider than the screen (note: works perfectly without scrollbar).
Is there a way to solve this problem so that the child element takes exactly full screen width? If not in pure CSS then with JS?
Note: an overflow rule on body isn't acceptable in my case as I need the child to fill the exact width of the screen.

https://jsfiddle.net/k3nvkL35/4/
One of the issues you'll come across with the solution here is that I believe scrollbar widths are not universal, and so you may need to implement some conditional logic to affect width/margin based on that.
That being said, you may find this useful. The function below will check to see if the document has a vertical scrollbar by comparing the document's height to the window's height. Based on the existence of said scrollbar, it will modify the child's width and margins to fit the window.
Again, it likely requires tweaking, though it should provide a decent foundation.
function adjustWidth() {
if ($(document).height() > $(window).height()) {
$(".child").css({
"width": "calc(100vw - 18px)",
"margin-left": "calc(-50vw + 50% + 9px)"
});
} else {
$(".child").css({
"width": "",
"margin-left": ""
})
}
}
$(window).resize(adjustWidth).trigger("resize");
.parent {
width: 500px;
height: 500px;
margin: 0 auto;
border: 3px solid green;
}
.child {
height: 100px;
background: red;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
content
</div>
</div>

Simple. Since the parent isn't positioned in any way, then the child can be positioned absolutely. No messing with calc or otherwise, works everywhere.
.child {
height: 100px;
background: red;
position:absolute;
left:0;
right:0;
}
Here is a working fiddle:
https://jsfiddle.net/vgbr6qw2/

I found this solution, which was sourced by this guy, but I don't know who originally did it. I haven't fully tested it, so it may not work in all browsers. I know the vw unit isn't supported in IE8, as if anyone cares.
body {
margin:0;
}
.wrapper {
width:100%;
max-width:400px;
margin:0 auto;
background:pink;
/* margin is for display purposes on stack overflows fullscreen snippet view */
margin-top:80px;
}
.full-width {
width:100vw;
margin-left:-50vw;
left:50%;
background:red;
position:relative;
color:white;
}
<div class="wrapper">
<span>Hi. I'm a paragraph.</span>
<div class="full-width">
<p>You aint no paragraph, sucka!</p>
</div>
<strong>Be quiet, you weak losers.</strong>
</div>

Proportional width div with 100% height (without JS?) [duplicate]

I need to maintain the width of an element as a percentage of its height. So as the height changes, the width is updated.
The opposite is achievable by using a % value for padding-top, but padding-left as a percentage will be a percentage of the width of an object, not its height.
So with markup like this:
<div class="box">
<div class="inner"></div>
</div>
I'd like to use something like this:
.box {
position: absolute;
margin-top: 50%;
bottom: 0;
}
.inner {
padding-left: 200%;
}
To ensure the box's aspect ratio is maintained according to it's height. The height is fluid because of it's % margin - as the window's height changes, the box's height will too.
I know how to achieve this with JavaScript, just wondering if there's a clean CSS-only solution?

You can use an image that has the desired proportions as to help with proportional sizing (images can be scaled proportionally by setting one dimension to some value and other to auto). The image does not have to be visible, but it must occupy space.
.box {
position: absolute;
bottom: 0;
left: 0;
height: 50%;
}
.size-helper {
display: block;
width: auto;
height: 100%;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 153, .8);
}
<div class="box">
<img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
<div class="inner">
1. box has fluid height<br>
2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
2.1 it thus maintains width = 200% of height<br>
2.2 it defines the dimensions of the box<br>
3. inner expands as much as box
</div>
</div>
In the above example, box, inner and helper are all same size.

You can use vh units for both height and width of your element so they both change according to the viewport height.
vh
1/100th of the height of the viewport. (MDN)
DEMO
.box {
position: absolute;
height:50vh;
width:100vh;
bottom: 0;
background:teal;
}
<div class="box"></div>

There is another, more efficient way to achieve constant aspect ratio according to height.
You can place an empty svg so you dont have to load an external image.
HTML code:
<svg xmlns="http://www.w3.org/2000/svg"
height="100"
width="200"
class='placeholder-svg'
/>
CSS code:
.placeholder-svg {
width: auto;
height: 100%;
}
Change width/height to achieve desired aspect ratio.
Keep in mind, the svg might overflow.
http://www.w3.org/2000/svg is just a namespace. It doesn't load anything.
If you change placeholder-svg class to:
.placeholder-svg {
width: 100%;
height: auto;
}
then height is adjusted according to width.
Demo 1 Width is adjusted according to height and 2:1 aspect ratio.
Demo 2 same as above, but you can resize easily (uses React)

The CSS trick you wrote, works pretty well to keep ratio width / height on an element.
It is based on the padding property that, when its value is in percent, is proportional to parent width, even for padding-top and padding-bottom.
There is no CSS property that could set an horizontal sizing proportionally to the parent height.
So I think there is no clean CSS solution.

As of 2021 there is a property called aspect-ratio.
Most browsers support it
div {
border: 1px solid;
margin: 8px;
}
.box {
width: 100px;
min-height: 100px;
resize: horizontal;
overflow: auto;
}
.inner1 {
aspect-ratio: 1/1;
}
.inner2 {
aspect-ratio: 3/1;
}
<div class="box">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
Run this snippet and resize the outer div manually to see the inner divs behavior

I can't find a pure CSS solution. Here's a solution using CSS Element Queries JavaScript library.
var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() {
element.style.width = (element.clientHeight * aspectRatio) + 'px';
}
new ResizeSensor(element, update);
update();
CodePen demo!

CSS - Scaling positioned elements rel. to browser window size

Is there a way to make position'ed elements scale correctly relative to the window size using only CSS or I got to step it up to javascript/jQ? I tried adding a container with 100% width and height and then scale accordingly.
.container{
position: relative;
width: 100%;
height: 100%;}
.transblock{
position:absolute;
width:44%;
height:5%;
top:90%;
left:0%;
background:green;
opacity: 0.6;
z-index:5; }
.h1text{
position:absolute;
width:30%;
height:5%;
top:90.75%;
left:13.5%;
z-index:10;
color:white;}
http://jsfiddle.net/cyaXL/
The gap between the paragraph and the menu is the issue. It's too small on 1280p screen and too large on 1920p. Is there any way to make it adjust better?

You can as well us 'viewport' units like this:
div {
width: 50vw; //means it should take 50% of the window size
}

I think the fact that you have the .menu4 with a left of 25% is the problem here:
.menu4 {
left: 25%;
}
better:
.menu4 {
left: 0%;
width:auto;
margin-right:1%;
}
.menu4 ul {
float:right;
clear:both;
}

This must be done through css and not with any scripts and Yes your are doing it right, making the container go 100% of windows size then placing items in that container.

You are using font size in pixel. Please try with "em". while doing the layout with %, we need to used "em" instead of "px". please refer the conversion table and try.