Hi HTML/CSS Developers !
Stuck in a strange scenario
will try to explain my query through images.
Need it to work in IE 8 or 9 atleast.
Points:
its an approach for a responsive layout,
.container {width:100%;margin-left:auto;margin-right:auto;display:block;}
.parent-container {width:auto;overflow:hidden;margin:0 auto;display:block}
.child-element {width: 285px;float:left
}
Hierarchy
.container > .parent-container > .child-element
Labels:
I have a 100% container
inside it, I have a parent-container {no width-declared (red background color)}
inside that i have child-elements with a fixed width.
What I want that, no matter, what my screen size is, if there is space for 3 child or 4-child elements, my parent element should always be in center.
width of child elements should contribute to parent-elements width
This is what i have
This is what i am getting
This is what i want it to be (see the parent-width is reduced depending upon child-element)
FIDDLE
http://jsfiddle.net/happy2deepak/9wm7ppwL/2/
You need some javascript to update the parent container's width according to the window width, you can do it by dividing window width by child width (padding and margin included) and take the maximum possible children which is the floor of the division result
function setContainerWidth(){
var childWidth = 305,
winWidth = $(window).width(),
parentContainer = $('body').find('.parent-container'),
minChildren,
containerCalculatedWidth;
minChildren = Math.floor(winWidth / childWidth);
parentContainer.css("width", minChildren * childWidth);
}
setContainerWidth();
$(window).resize(setContainerWidth);
a fiddle to see how it works.
Related
I have three floating divs that are supposed to be of same height always. But the height should be the height of the longest floating div.
I have set up media queries, so this should work in all three cases.
I was unable to use faux columns since I have space between all three sections.
I created a fiddle.`
I have to do this assignment with float so please don't ask me to remove float and use tables or something. *
enter code here
Please resize the window to see effect of media queries.
Thanks.
Use window.getComputedStyle to calculate the height of the section.
Loop in section and compute the max height. Then assign it as the section height.
var maxHeight = 0;
$('section').each(function(index, element) {
var style, height;
style = window.getComputedStyle(element);
height = parseInt(style.height);
maxHeight = height >= maxHeight ? height : maxHeight;
});
$('section').css('height', maxHeight + 'px');
Fiddle Link
Set max-height and min-height to elements .I changed your code and now all have the same height
https://jsfiddle.net/75r9mbxn/2/
Update :
https://jsfiddle.net/75r9mbxn/8/
Now it changes based of the highest height of the elements, it changes on load,you can make it change on updating the section
I am new to responsive web design and was looking at an answer.
It doesn't really explain much but provides a solution.
If an img is set as width: 100% I understand that it will occupy 100% of the browser window or its containing element.
The max-width property states that it is used to set the max width of an element.
If I set an img tag to max-width: 100% to what element/context is the percent calculated against?
All I see is when max-width is used the image scales down but never up.
Max-width example: http://jsfiddle.net/ErNeT/1445/
Width example:http://jsfiddle.net/ErNeT/1446/
If I set an img tag to max-width: 100% to what element/context is the
percent calculated against?
By default an img tag has no dimension set on it. So whatever happens, that image will never resize. However, applying max-width will make it behave like it has 100% width. It will resize based on the parent container BUT will stop at the maximum width the image has. For example: if the image was sliced to have 100px width, it will resize up to 100px width.
On the other hand, by applying width (and no max-width property) it will disregard all other width properties of the image and the parent container.
If you set max-width to img then it will be the max-width of its parent. If you don't specify a width for the img then it will not exceed it's native size.
When you set percentage values, both width and max-width are relative to the containing block. However, if the width of the containing block depends on the width of the element, the resulting layout is undefined.
From the specification,
https://www.w3.org/TR/CSS2/visudet.html#the-width-property
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block. If the containing block's width depends on this element's
width, then the resulting layout is undefined in CSS 2.1. Note: For
absolutely positioned elements whose containing block is based on a
block container element, the percentage is calculated with respect to
the width of the padding box of that element. This is a change from
CSS1, where the percentage width was always calculated with respect to
the content box of the parent element.
https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
Specifies a percentage for determining the used value.
The percentage is calculated with respect to the width of the
generated box's containing block. If the containing block's width is
negative, the used value is zero. If the containing block's width
depends on this element's width, then the resulting layout is
undefined in CSS 2.1.
From my point of view
if width > max-width use max-width
Example: Let's say you have 1 div box or Image which is you set the size of the box width > 1000px and max-width 500px. It still follow the max-width.
Example 2 - Using percentage : Let's say that div of your width set 500px, and max-width :100%; what is the result you will get ? The box div will turn 500px that is your starting point. Try shrink it. What is the result you will get next? It's turn responsive.
DEMO
this is what i understand about the difference between width and max-width.
Based on your question and fiddle, I think this is the answer what you're looking for.
Max-width example: DEMO2
- When you start use max-width and set 100%. let say your images size is width is 300px. Meaning that your images starting point are 300px. You aren't override the original image width.
Width example: DEMO3
- When you start use width and set 100%. Meaning that your image are override the original image width.
My element's height increases depending on what the user does with it. If I give it a wrapper div, and give that div an explicit pixel height and overflow:auto, it works as I would want it to (when the element becomes bigger than the height of its parent, it doesn't increase the size of the parent). I want the wrapper div to be as big as the space available on the page, but not allow it to expand beyond that. Giving it height:100% doesn't work, it just gets bigger. Giving it height:100vh also doesn't work because there are other elements on the page and so the size is too big.
I want the wrapper div to be able to expand until it becomes too big for the viewport (which height:100vh would achieve if it were not for the other elements on the page).
Basically I'm looking for something like height : amount of available space in the viewport.
This is what I ended up doing:
var viewportHeight = $(window).height();
var offset = $('#gridWrapper').offset().top;
$('#gridWrapper').height(viewportHeight - offset);
I execute the same stuff again on resize. gridWrapper is the id of the wrapping div.
you can use height:80vh or similar depends on the height of your other elements
function resizeElement() {
var height = $(window).height();
var neededHeight = (70 * height) / 100; //If you want 70% of the viewport
neededHeight = parseInt(neededHeight) + 'px';
$("div").css('height',neededHeight);
}
$(document).ready(function() {
resizeElement();
$(window).bind('resize', resizeElement);
});
You can try this. You may need to check what value do you get in var height. Depending on that you can append px or not in neededHeight. This is basically the logic.
Consider the basic HTML below:
<body>
Random HTML content
<div class="container">
<!--Some content loaded via ajax or the like -->
</div>
Other random HTML content
</body>
I want the width of the "container" div to be the MAXIMUM of three potential values:
100% of the window
1024px (for best visual appearance)
the width of the content
I have been able to accomplish #1 and #2 by using the CSS properties width:100% and min-width:1024px. I can also accomplish #2 and #3 by setting display:inline-block and min-width:1024px. However, I haven't been able to get all three: if I add in the width:100% to the display and min-width properties, it overrides the child content sizing effect of the inline-block display and gives me only 100% width, even when that means the content overflows.
I know I can hide overflow or give the div itself scrollbars, but what I want is for the div to expand as needed, or to the full width of the window, whichever is greater - but never narrower than 1024px.
Edit: Note that the content loaded in the div may be less than 1024px. The div itself, however, should never be less than that, as it would no longer blend nicely with the look and feel of the rest of the page.
You can achieve this by adding another div on top of first one:
<div class="container2">
<div class="container">
</div>
</div>
css:
.container2{min-width:100%; display:inline-block;}
.container{min-width:1024px; width:100%;}
http://jsfiddle.net/om10t3gn/4/
You can augment your second proposal with a virtual pseudo-element to achieve the dimensions you want without using javascript
.container {
min-width: 1024px;
display: inline-block;
}
.container::before {
width: 100vw;
display: block;
content: ' ';
}
Basically, it's adding a zero-height element to the top of your container that has the same width as your viewport, which is 100% of the width of <body>. So it adds #1 to your existing solution that already achieves #2 and #3.
And it doesn't use any javascript, and will stay correct with resizes.
I am not very skilled with CSS, but I think I have a solution for this problem.
To have a max-width in pixels and a max-with in percent at the same time, you could first calculate the width with the clamp-method (this includes the first of your two max-widths) and then add a normal max-width. The clamp-method is relatively new and not supported by old browsers unfortunately.
<div class='container'></div>
CSS:
.container{
width:clamp(400px,250px + 25vw,100%);
max-width:700px;
}
This should set a max-width both at 100% and 700px.
I have tested it on a notebook with Firefox and Chrome.
Use javascript to pick the largest value, use jQuery to assign that value to the width of the container div.
var window_width = $(window).width();
var container_width = $('.container').width();
var default_width = 1024px;
var max_width = Math.max(window_width, container_width, default_widht);
$('.container').css('width', max_width);
I have two columns in an html page, one is floated right and the other is floated left.
I have set the height of both containers to 100% and the width of both containers to 50%. I want the two containers to fit the entre window. When the user re-sizes the window horizontally I don't want the content to resize. How can i achieve this?
Thanks
There is many way to achieve that. First of all, the easiest would be to put the css value min-width! So if you want it to resize but to stop at 960px (for example) you just have to do :
myCoolDiv{
width: 100%;
height: 50%;
min-width: 960px;
}
That would give you the best result. Else, if you dont want content to resize at all, and the selector to have a width equal to 100% of the initial screen, I would use jQuery that way:
$(document).ready(function() {
//Call a variable to know the width of the window
var screenWidth = $(window).width();
$('myCoolDiv').css('width', screenWidth + 'px');
});
Hope it helped! Tell me if my answer is not clear enough or if you don't understand a part of it!
Cheers!