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!
Related
I am creating a simple portfolio webpage for an photographer. He wants to show his pictures in the web. So the images should be responsive. So I wrote following code to the image class:
img {
max-width: 75%;
height: auto;
}
So it fits the image to the width of any screen, but I want to show the image in full height. So if the image has a bigger height, the user have to scroll down to see the whole image. So how should I set the height, so the whole image whould be shown immediately?
With regards,
Andrej
did you try reversing the same, as in, try giving it a height, and leave the width to auto..!!!
Because u just need to set either of the two, and the other adjusts accordingly...
Simple:
max-height: 100%; /* or a bit less */
But note what the docs say:
The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
Ok, I have found a solution.
I just set the max-height with the vh units (viewport height).
Thx for your help.
try this way: img{max-width:100%; max-height:100%;}
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 am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
This is my container:
.test {
height: 100vh;
}
update: This actually works without problem in firefox.
Which stretches to the full height of the webpage whenever the page is loaded, but when I resize the page vertically, it seems the viewport is not updated. In this first image, the div is the full height of the viewport:
However, when I resize the browser window vertically, the .test div is not updated - see image below.
To see for yourself, please check out the codepen here: http://codepen.io/anon/pen/CLbqy
Should I resize the window horizontally however, the height resets to the correct viewport height.
one possible suggestion is that you should use % instead vw or vh. Since we may not be able to give font-size in %, instead of px or em, we can use vw or similar kind of stuff.
And now if fonts given in vm they will not load the new change of window height and width if re-sized. So here is a small solution which I found in some random article.
causeRepaintsOn = $("#yourTagIdWithFontInVM");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
This is the link where I found the above solution. Link
This might be an issue with scrolling in the CodePen iframe. It worked better for me when I prevented the page from overflowing:
html, body {
margin:0;
padding:0
}
Would like to find a way to add a div with position fixed and max width, that should be placed either in a div with overlay or outside overlay. But the tricky part is that, when the window is scaled, I would like it to adjust per percentage....
So if I have a div with max width of 800px but when I make the browser window smaller, it should shrink. Is this possible for all browsers?
Or do I have to use a plugin for this, like jqModal? Please help. Thanks!
Just define a max-width, and then use percentages for scaling purposes:
.modal {
width: 50%;
max-width: 800px
}