JS Fiddle
I have an image, I need to exclude the padding from it's size.
I use:
box-sizing: content-box;
The problem is, that when I resize the browser, I expect the image to shrink in size. With the above content box, the image does not shrink when the browser is resized as expected. Resizing only happens after the browser has been dragged in past all of the padding. This means half the image goes off screen.
Is there a way to use content box, padding and still have the image resized when the browser resizes.
Set to the width the correct value using a calc expression
img{
box-sizing: content-box;
max-width: 300px;
padding: 0 100px;
background: green;
display: block;
margin: 0px auto;
width: calc(100% - 200px);
}
<img src="http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg">
I do not know if you want this:
https://jsfiddle.net/g47u1hop/
img{
box-sizing: border-box;
max-width: 300px;
padding: 0 100px;
background: green;
display: block;
margin: 0 auto;
width: 100%;
}
You can use box-sizing: border-box
Or you can use media queries to control you image size
Related
There are lots of pages discussing vh and vw versus percentage. (I'm running on Chrome btw). In my mind, 100vw should mean the exact size of the browser window no matter whether I expand it or shrink it -- and when I draw a border around a div that's 100vw, IT DOES match that width.
HOWEVER, 100vh ALWAYS overflows the bottom of the screen. I've played with:
html, body {
height: 100%;
width: 100%;
}
and
html, body {
height: 100vh;
width: 100vw;
}
and when I draw a border around a div that's 100vw and 100vh, the box overflows the bottom of the screen.
WHAT (if anything) am I missing here? To me 100vh goes to the bottom of the currently browser window size and not a pixel more.
Thanks in advance
Add *, *::before,*::after { box-sizing: border-box; } at the start of your file, the border will now be part of the width, like the padding.
Check there : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing
By default, the box-sizing is set to content-box, that mean that when you set:
width: 100px;
padding: 20px;
border: 5px;
The total width will be 100 of content + 20 padding + twice 5 (5 for border-left, and 5 for border-right) = 130px;
If you set the box-sizing to border-box it will include the borders and padding in the width
So the width will always be the width that you set, regardless to the border and padding, and it will automatically calculate the width for the content : 100px - 20px - 2 * 5px = 70px;
Example:
$('#toggleBoxSizing').on('click', function(){
$('div').toggleClass('contentbox');
});
*, *::before, *::after {
box-sizing: border-box;
}
html, body {padding: 0; margin: 0; }
div {
height: 100vh;
width: 100vw;
border: 4px solid black;
}
div.contentbox {
box-sizing: content-box;
}
#toggleBoxSizing {
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="toggleBoxSizing">Toggle "box-sizing: border-box;"</button>
</div>
Here is my css:
.contain
{
min-width: 300px;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
Clearly the two divs display inline, which is what I want.
However, when the browser is resized smaller the divs are displayed one above the other (desired behaviour), but once I make the browser window smaller than min-width, I need to have horizontal scrollbars displayed. This is not happening.
Any help as to why?
Edited: I tried the suggestions here, but they all seem to break the desired behaviour of the divs stacking on top of each other when the browser is sized smaller.
The effect I am after:
display the divs inline (with no scrollbars) in a browser that is wide enough; but in a "narrow" browser (ie mobile) display the divs one on top of another and THEN add horizontal scrolling ONCE the min-width can no longer be displayed for each div.
I think that's a little clearer...
You just need to have a wrapper for the divs and set it with
.wrapper{
min-width: 100%;
white-space: nowrap;
}
Here is the Fiddle: https://jsfiddle.net/1hshzxah/3/
Your outside boxes have the same minimum width as your inside ones, so both will be at least 300px wide, so no scrollbars appear. Because of the defined pixelwidth of your outer elements, your they will not stack next to each other if you do not have 600 pixels to play with or more. If you give your outer boxes a width that can scale (by using % or vw) with the page width, your result magically appears:
.contain {
width: 45%;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
#media all and (max-width:600px){
.contain {
width: 100%;
}
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
(I use 45% because I did not want to bother with floating these nicely next to each other, but you could with some more CSS). You can still add a max-width of 300 pixels to your containers to make sure they don't grow beyond 300px, but still shrink otherwise.
In code below I have set the width of page to 980px and there appears some whitespace at right side, which disappears on setting body width to 1050px. My screen resolution is 1366x768, I have read that most websites have 950px to 980px width and most websites like facebook entirely fit into my screen then why my 980px is having whitspace at right side.
body {
width: 980px;
overflow: scroll;
}
#container {
width: 100%;
}
.one {
height: 200px;
float: left;
border: 1px solid red;
width: 25%;
box-sizing: border-box;
}
.two {
height: 200px;
display: inline-block;
border: 1px solid blue;
box-sizing: border-box;
width: 50%;
}
.three {
height: 200px;
float: right;
border: 1px solid green;
box-sizing: border-box;
width: 25%;
}
<div id="container">
<div class="one">this is first block
</div>
<div class="two">the content changes it's position on zooming in
</div>
<div class="three">Is there any way to keep it as it is with a scroll bar
</div>
</div>
Have you tried setting the margin of html or body to 0?
Like:
html, body {
margin: 0;
}
JSFiddle
EDIT: The white space is a margin that is set as default for html, so if you want your page to be "borderless", you simply need to set the margin of html (and to be safe that of body, you never now what different browsers will do) to 0.
try unsetting width see what happens. I don't set page width on anypage I make and It works fine. now If I have a box a table a shadowbox ect ill set dimensions for that but I dont ever designate a page width. Maybe just comment it out refresh see what happen.
I have a fieldset which I want to take 25% of the browser window.
html, body {
padding: 0px;
margin: 0px;
box-sizing: border-box;
height: 100%;
}
body:not(:-moz-handler-blocked) fieldset {
display: table-cell;
}
fieldset {
box-sizing: border-box;
margin: 0;
}
fieldset#rx {
width: 25%;
max-width: 25%;
float:left;
height:100%;
overflow-y: scroll;
overflow-x: scroll;
}
While the fieldset is empty, it correctly occupies 25% of the window width.
As soon as some wide content is added, the fieldset expands to the size of its content, rather than staying at 25%.
How can I make the fieldset occupy 25% of the browser width, even when it has content?
Update: #rajuGT wrote a fiddle which illustrates the issue: https://jsfiddle.net/of4dmkmk/2
Well, fieldset has default min-width value (min-width: min-content;)
Edit: ehh that browser compatibility :(
Here you go: http://jsfiddle.net/of4dmkmk/4/
Chrome and ff behaves differently.
Include min-width for chrome
wrap fieldset in a div for ff
Old answer.
for your #rx also use this:
fieldset#rx {
width: 25%;
max-width: 25%;
min-width: 25%; // I have added this
float:left;
height:100%;
overflow-y: scroll;
overflow-x: scroll;
}
Why don't you just place the fieldset inside a DIV, and then set the div's width to 25%, and set overflow to hidden?
I have the following CSS:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
I have four instances of .divSelectImage which is why the width is 25%. I expect to see all four images side by side inside #imageContainer. So essentially, the four images should take up 100% of the #imageContainer which in turn takes up 100% of the screen.
But I don't. Despite checking firebug, at 25% each, the last image goes to the next line. I have to make them to about 24.5% for them to fit, but I don't want the white space at the end.
This occurs in both Firefox and Google Chrome.
Is there some kind of CSS wizardry that I am missing? How can I accomplish this?
I have set up the scenario on JSFiddle: http://jsfiddle.net/J3KXE/
Its because you haven't accounted for the 2px of border on each image, adding 12px in addition to the 100% width of its containing block. You can use the box-sizing property thats new to CSS to constrain the border and padding areas to the elements' content width:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
http://jsfiddle.net/J3KXE/1/
2 solutions :
box-sizing: border-box;
or
flexbox and all this shit (see http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/)
You have a border of 2px which increases the size of the boxes to 25% plus these 2px on each side. If you don't have to support IE7- you can simply use box-sizing: border-box. If you have to take older browser into account you'd have to declare a wrapper div width 25% without any border/margin/padding and add those styles to the child element.