I found a new style today while taking a class on Responsive Web Design, and then I looked up w3schools example and I'm slightly confused.
If I create a div of 200px by 200px and apply a 1px border around it, the element in total changes to 202px by 202px in theory.
But if I then apply border-box, it remains at 200 by 200 with the border and the actual content box is now technically 198px by 198px.
Just want to make sure that is what actually happens.
Using the example from w3schools, you can see that .div4's content doesnt seem to align properly however, why is that?
When you apply box-sizing: border-box; and make a specific width, that width is the max width of your div, including border, padding (for padding is that you see in .div4), etc.
That great for responsive design because it help you to calculate width for adapt your design.
Related
I've written a code to place two images side by side and show some text on hover, but I came across a weird behavior I can't explain and I was wondering if anyone can explain it to me.
Everything works fine with the code, but as soon as I add borders to the .project-tile class, to add borders around the image, both images collapse to the center.
I have tried to isolate the problem but I can't really figure it out, anyone has any idea?
codepen: https://codepen.io/pafestivo/pen/JjvNMmJ?editors=1100
This has to do with the css box-sizing property. By default, the value of box-sizing is content-box, which means the border is not constrained by the width: 400px; and instead causes the divs to overflow their width and trigger wrapping.
Setting box-sizing: border-box; on .project-tile will allow you to add borders while keeping the current positioning.
I1m currently working on a personal website but I have no experience with web development so I got stuck at a functionality that probably has a very simple solution. I have many of this div on my page and I just wanted the greyed background to:
Expand just a few pixels beyond the content of the div
Have rounded borders
I'm currently using
background-color: #ffffffab;
background-clip: content-box
to get the results shown, but either I paint ALL of the div, which is not what I intend to do or I leave it as it is shown in the picture. When using "border-radius" I have to increase to huge numbers like 80% to get rounded edges, and even so it cuts some part of the text. Is there an easy way to do what I'm trying to do? I'm also including this picture with the margins (orange) and padding (green).
Thanks!
Following #tacoshy suggestion:
I added more margin to the top and bottom of the container and increased the padding on the sides, this way I wouldn't need to use the content-box function: margin: 2em auto 2em; padding: 2em.
That solved it.
Thanks!
so lately I came up with this problem: My wrapper has a max-width of 1440px and I want to add a 10px solid border around it. When I add it the border just takes 10px of the max-width and is being displayed, everything's fine. But I want that the border does not take anything of the max-width, I want to display the 10px of the border by 1440px +
One solution would be media queries, I know that, and this also works fine. I am just wondering if there is a solution without adding a seperate wrapper and without media queries so the border just appears, when you resize your window over the 1440px and simply is cut off when you resize the window under 1440px.
Just for anybody who is wondering. I have a boxed layout and want to limit the content area for larger screens, but whish to use full-width on smaller screens.
Thanks! :-)
You could possibly add a position relative to the container and have a z-index set. Then have a pseudo item like :before have position absolute and a negative z-index with the height and width set to match the parent. This will put it behind your content and if you have the border added to it you should be set. Probably will need overflow-x:hidden on the body so it doesn't create a scroll bar. I'll create the code for this soon for reference.
Or a less complex option would be
outline:10px solid blue;
Outline goes outside of an element even with box-sizing of border-box.
This did it, the next thing I see is how to get a border-radius with the outline. I remember a trick with box-shadow. I will search for it, since the original question wis solved. Thank you very much! :)
Im trying to build a fluid layout in CSS with percentages instead of pixels. I want it so that if the user tries to zoom in on the website, all internal proportions should stay the same.
Right now, when I zoom in, the text grows out of the drivs and the layout breaks.
I'm using a wrapper and three columns which has about 30 percent in width each.
Since this is sort of a layout problem, I've posted the entire layout on JSBin. The problem is apparent there as well. When you zoom in, the internal proportions break and the text grows out.
http://jsbin.com/zerewuto/1/
Anyone got any ideas how to fix this?
In top of your css add:
* { box-sizing: border-box; }
This makes the box model calculate paddings and borders inside of the box. It's best to use when working with relative measures. (Or always)
EDIT: Forgot to mention. The reason the layout breaks is because of margins. At a point they + the percentage becomes more than 100%.
Consider a page that is 100px wide only. Then each 10px margin would be equal to 10%.
Lycka till!
You could try to add word-break: break-all to your CSS.
I would like to warn you that Liquid / Fluid layouts do not prescribe the use of percentage values for everything as this can easily cause display problems like this.
Use pixel values and percentage values reasonably to achieve a robust liquid design.
I'm trying to create a fluid layout, so I used a width in %. I tested the site on Chrome, Safari and IE. When it worked fine in IE I thought my work was done, however when checking it in Firefox I realized the width was incorrect. EG: two 50% elements wouldn't fit in one line neither 3 elements with 33% width. This is an example from my site:
http://pranalog.com/example.php
How can I get this to work on Firefox (or on the most browsers)?
You have box-sizing: border-box; set on the div's, to set border-box in Firefox, add:
-moz-box-sizing: border-box;
to your style rule. This is needed to get box-sizing to work in Firefox, setting this property to border-box forces the browser to render the div's with the specified width and height, and places the border and padding inside the div's.
This in turn fixes your issue: with the border rendered on the outside of your div's, the total width of your elements is essentially 3 times 33.3% = 99.9% plus 6px needed to render the the six 1px wide borders on the right and on the left of each div. Since 6px is more than the 0.1% of the page width that is left, the last div doesn't fit on the same line anymore and moves down to the next line.
With the border rendered inside the div's by setting border-box properly, you won't have this issue.
Here's a fixed up jsFiddle
It's because you have a border of 1px, try removing the border value and all three fit side by side.
If you would like to keep the border then just reduce the width to around 32%
Good luck