I created the simple div with a border and try to set up 1.5px border around it, but inspector shows it as 1, 0.8, 1.33, 1.143, 1.5, 1.33, depends on the screen scale, 100%, 125%, 150%, 175%, 200%, 225%, respectively (Chrome, Windows 10).
https://jsfiddle.net/q90xyzdf/
<div>123</div>
div {
width: 60px;
height: 60px;
box-sizing: border-box;
border: 1.5px solid black;
}
What's the reason and how to fix it?
Related
The 'gutter' property works fine, but as you can see in columns 2 and 3, margin-bottom styles don't have any effect.
All the divs are position: absolute.
What to do? I tried faking the effect with thick borders, color: transparent, but not working so far.
.announcement {
background: rgba(255,255,255,.7);
outline: 10px solid transparent; // <--- comes out white instead of
box-sizing: border-box; showing the blue background
width: 450px !important;
padding: 10px;
img {
max-width: 100% !important;
}
}
I have a div with an image inside. Images have varied sizes and orientation, I want the images to resize proportionally if the image size is larger than the frame (images should retain the original size if they are smaller than the frame).
My problem is the image does not resize proportionally in Firefox (image is no longer proportional, height increases if the image width goes over the max-width property, though the width respects the max-width property), but looks fine on Chrome.
I'm not sure if this could be fixed with CSS alone, but a CSS-only solution would be preferred if there is any.
CODE
.frame {
width: 160px;
height: 160px;
border: 10px solid #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.frame img {
box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9);
max-width: 140px;
max-height: 140px;
}
<div class="frame">
<img src="//s3.amazonaws.com/ssiCebu/Confirmit/APAC/2015/May/23991558_LowRateRepricing/cards/1.jpg" />
</div>
<br><br>
<div class="frame">
<img src="//i.bnet.com/blogs/vertical_farm_in_desert_chris_jacobs.jpg" />
</div>
Here is working fiddle for your example: https://jsfiddle.net/tjmrmLcc/2/
Try and edit following CSS rule
.frame img {
box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9);
width:100% /*Added Rule*/
max-width: 100%;
max-height: 140px;
}
I have a div which contains three child div's, and for some reason the first child div is properly positioned within its parent, but the other two children are positioned lower from the first child. The more content I add to the first child the lower the other children become positioned relative to the top of the container parent.
Heres a jfiddle showing you my problem: http://jsfiddle.net/gY72a/7/
the three children arent on the same line here but you can see the problem when you look at how high the first child is positioned compared to the second one.
Code is already in the jfiddle, but here is the css I am using:
/*Parent div in which all three children are nested*/
#main {
width: 80%;
min-width: 1000px;
background-color: #FFFFFF;
margin: 1% auto;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
/*First child*/
#leftside {
display: inline-block;
width: 18%;
margin: 10px 1% 8px;
padding: 1em;
background-color: rgba(0, 0, 0, 0.1);
}
/*Second Child*/
#innermain {
display: inline-block;
width: 50%;
margin: 10px 1% 8px;
padding:1em;
background-color: #eaeaea;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
/*Third child*/
#rightside {
width: 20%;
min-width: 320px;
padding: 1em 0px;
display: inline-block;
background: #FFFFFF;
margin: 10px 1% 8px ;
border-radius: 1px;
border: 1px solid rgba(0, 0, 0, 0.15);
}
The main problem here is that you are using `display:inline-block" and also that you are using a combination of percentages and margins with ems. Now, theoretically, you could have 3 blocks, and add their widths and the padding, and the margin - to all equal 100, but even if you wanted to go that route, you are using the inline-block method - which by default leaves a little unwanted space between each block, and throws off that number. Beyond that, padding and margins add to the size of the box, so if you have a box that is 20% wide, and has a padding of 1em and a margin of 1% - then it's 20%+2%+2em (+total border width) - and what does that equal? Well, I don't know - and the browser isn't going to love dealing with that either, because depending on window size, that number is going to be different. So, if you want to know the problem, those are the factors leading to the problems.
If you want a solution, then you have a few routes, but they depend on what you need to do. It doesn't appear as though you are building this site responsively. So in that case, you are working with a 1000px wide canvas. - and in that case, then there is no reason why you cant just use px to add up margin/padding/box size etc to equal 100. leave the boxes as display: block; and float them left.
If you want to come into the present, and start using a bit of modern stuff - you should read about box-sizing: border-box - What that does is change the box model so that the padding and borders of boxes moves inside the box and therefore doesn't add to it's size. It's really great and makes working with css a pleasure. Then you don't have to add stuff up to determine the box's size. - so - unless you need to support IE 7 - I would suggest you make it standard in your overall approach to CSS from now on. http://www.paulirish.com/2012/box-sizing-border-box-ftw/
If you are going to float the columns in their "wrapper" thing - then that wrapper thing is no longer going to regognize them in the same way, so you are going to have to look up clearfixing the div, or use overflow:hidden; (which has some issues) or float that wrapper itself to get them to live in the same world again, because floating takes the elements out of the regular flow.
In the case that you can go with box-sizing, then you still have to worry about margins(they don't move inside the box). So, you'll need to have those in percentages, or get another fancy way of making consistent gutter widths, but since you have a static sized site - I'm not going to go into that.
Here is a fiddle without all of your styles - to show how it works.
HTML
<div class="content-wrapper">
<div class="column what">
<h2>What We do</h2>
<p>Bla bla bla</p>
</div>
<div class="column main-content">
<h2>Latest News and Events</h2>
</div>
<div class="column where">
<h2>Where To Find Us</h2>
</div>
</div> <!-- .content-wrapper -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
overflow: hidden; /* should be clearfix instead */
}
.column { /* what the columns have in common */
float: left;
padding: 1em;
}
.what {
width: 25%;
margin-right: 1%;
background-color: orange;
}
.main-content {
width: 48%;
margin-right: 1%;
background-color: yellow;
}
.where {
width: 25%;
background: red;
}
You have specified display:inline-block for the divs below which should align them properly in a row with the widths given. But the width is taken by the content section of the div and the div adds the margins given to them with the width. This is why the blocks are jumping below one another.
When you apply box-sizing: border-box; to the divs, the width of the div will be calculated including the margins given to the corresponding divs.
Hope this helps you.
#main, #leftside, #innermain{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
This should do what you want:
#main div {
float: left;
}
I'm trying to align five horizontal menu elements with 'float:left' next to each other inside a container that spans 80% of the screen and a minimum of 960px. For this, I had initially set their min-width to 192px (960/5) and their width to 20%, but quickly realized this does not play well with adding 1px borders, causing one of the buttons to be 'thrown overboard'.
Changing the widths to 19.895333% and 191px, respectively, solved the issue, however this is clearly a hacky solution which also leaves an ugly space of 2-3 pixels at the right side of the menu.
Is there a more elegant way to align these elements and account for the bonus width added by borders, padding etc? I have tried 'overflow:hidden' to simply hide whatever may poke outside the container, but this just hides the entire 5th button.
A picture to illustrate the result:
The html code:
<div class="menucontainer">
<div class="menutab" id="menutab_first">News</div>
<div class="menutab">Game Guide</div>
<div class="menutab">Articles</div>
<div class="menutab">Media</div>
<div class="menutab" id="menutab_last">Community</div>
</div>
The css code:
.menucontainer {
height: 26px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-style: solid;
border-color: #303030 #101010 #000 #101010;
border-radius: 0px 0px 8px 8px;
}
.menutab {
line-height: 26px;
float: left;
width: 19.895333%;
text-align: center;
min-width: 191px;
border-right: 1px solid #202020;
background-image: url('../img/menubutton2.png');
background-size: 100% 100%;
font-family: 'Cabin', sans-serif;
}
#menutab_first {
border-radius: 0px 0px 0px 8px;
}
#menutab_last {
border-right: 0px;
width: 20%;
min-width: 192px;
border-radius: 0px 0px 8px 0px;
}
Thank you in advance!
For this you can make use of the box-sizing property to set your borders to appear within your elements rather than outside of them:
elem {
-webkit-box-sizing: border-box; /* Some mobile browsers. */
-moz-box-sizing: border-box; /* Firefox. */
box-sizing: border-box; /* All other browsers IE8+. */
}
border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.
So in the case of your CSS:
.menutab {
...
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
...
}
What you need is box-sizing:border-box;
This CSS property will change the box model for the element such that the border is included inside the width, rather than outside of it as with the standard box model.
This means that your boxes will then be 20% of the width of the page, rather than 20% + the width of the borders.
Problem solved.
box-sizing: border-box causes the width of the borders to be counted as part of the 20%. That's the best solution but if that will interfere with your layout in some way, an alternative is use calc to subtract the borders from the 20%, e.g. width: calc(20% - 2px);
I have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without JavaScript?
CSS:
.floating-window {
z-index: 9999;
position: absolute;
width: 200px;
height: 200px;
cursor: default;
-moz-box-shadow: 1px 1px 1px #888;
-webkit-box-shadow: 1px 1px 1px #888;
box-shadow: 1px 1px 1px #888;
}
HTML:
<div class='floating-window box'></div>
With percentages, you can set your box such that half of it is on the left side. So
width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */
You could also use px but then you'll be limited to an absolute container width. Have you searched around? I know there are some articles explaining this method more extensively than I have.
Sure, it's possible, but how are you going to make it go away?
That's going to need JavaScript...