I have styled some links to look like buttons. These 'buttons' include icons which are added with an icon font using the :after element.
As its a responsive layout, the buttons need to work on multiple screen sizes. When placed inside a flexible container, the:after element overflows it's parent.
Example:
The HTML basically looks something like this:
<div class="wrap">
Test
</div>
with the following CSS code:
.wrap {
background: grey;
width: 20%;
padding: 20px;
}
.btn {
display: inline-block;
padding: 15px;
background: linear-gradient(to top, #ccc, #fafafa);
border: 1px solid #999;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,.55);
max-width: 100%;
}
.icon {
font-family: FontAwesome;
}
.icon:after {
content: "\f04e";
margin-left: 8px;
}
and see this Fiddle: http://jsfiddle.net/r6uLJ/
When you narrow the window size, you will see the two triangles (blue) overflow the button (with grey-white gradient). Is there anything I can do to avoid that but still use pseudo-elements for this?
If you remove the max-width: 100% rule from the .btn rule set, then the problem does not occur.
See: http://jsfiddle.net/audetwebdesign/r6uLJ/3/
.btn {
overflow: hidden;
}
Should do the trick.
try this:
* {
box-sizing: border-box;
}
your thing overflows because of the box model which (the default one) adds the padding on top of the width. so having 100% width is 100% of parent and if you add 15px padding it will overflow 30px when the content wraps on 2 lines...
you might need to prefix it depending on browser, e.g:
-box-sizing: border-box
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Related
I am having a bit of trouble getting my li elements to stay within the parent container. They continue to go off the right side of the page for some reason.
Overflow: Auto seems to fix the problem, but the issue with that is that it cuts off the border and doesn't allow me to scale the li elements properly (I want to have them be about 30% width of the parent container eventually).
Can anyone explain why this is happening or suggest an alternative solution?
Here is my code:
https://repl.it/KZXi/0
https://repl.it/KZXi/2
The problem is the by the default the box-sizing property excludes the padding, that is why your li element contain more than 100% of its parent please read https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
To solve just add..
.answerBox {
border: 2px solid black;
background-color: white;
padding: 40px;
width: 100%;
height: 130px;
box-sizing: border-box;
/*margin-left: 20px;
margin-bottom: 30px;*/
}
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
You can change the box-sizing on your list elements to include padding.
box-sizing:border-box
At the moment your list elements are 100% width + padding-left:40px and padding-right:40px so they overflow the parent container.
Try this CSS to your li:
li.answerBox {
border: 2px solid black;
background-color: white;
padding: 4%; /* <---- */
width: 91%; /* <---- */
height: 70px;
The problem is, when you give padding and border, the content overflows.
This question already has answers here:
Impact of border property on top margin
(3 answers)
Closed 7 years ago.
EDIT: found a very good link explaining all about border collapse:
border collapse explained with examples
End of edit. Enjoy :)
I am failing to understand this...
Why applying a 1px solid black border to my div changes the div's size by a lot?
(without the border I can see a relatively thin line as my back ground color, with the border the רectangle of the background color is much wider, see the pictures)
this pic is without applying the border:
and now look at this photo (the only difference is the border...)
can someone explain how the border influences so much on the div size / what is really happening here?!
style:
#header {
background-color: yellow;
color: white;
text-align: center;
border: 1px solid black;
}
here is a fiddle so you can play around:
my fiddle
Thanks a lot,
Jimmy.
That's because of margin collapsing.
The margin is not part of the element iself, it's the distance between the element and surrounding elements, or between the element and containing borders or paddings.
In the first image the margins of your header element (a h1 perhaps?) is collapsing outside the div. The margins doesn't affect the size of the div, instead it pushes the surrounding elements away.
When you add a border to the div, then the margins of the header element will push the border away from the header element instead of pushing surrounding elements away. The margins of the header element determine the size of the div.
The Header size is same, just the background will not fill the area specified as element margin. Your h1 has default margin at top and bottom which is not calculated by browser to be filled. In order to force it you can use overflow: hidden; on Header, an old trick that covers 99% of famous clearfix class (for float fix):
#header {
background: yellow;
overflow: hidden;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
The other way would be to avoid h1 margin and use padding instead, or fixed height:
#header {
background: yellow;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
h1 {
margin: 0;
padding: .8em 0;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
You can add box-sizing to prevent this from happening. Not every browser supports it though.
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
The total size of an element is going to be defined by:
Margin>Border>Padding>Actual element size
Your browser's developer console should allow you to see the value of all of these so try and see which one is changing between those two instances. From the pictures provided it looks like the padding may be changing as you manually adjust the border.
Try manual setting these values:
#header{
border: 1px;
border-color: black;
margin: 0;
padding: 0;
}
Set margin on the h1 tag to 0:
h1 {
margin:0;
}
I updated your fiddle here
Perfect example why sometimes using outline instead of border can solve a lot of headache.
Outlines differ from borders in the following ways:
Outlines do not take up space, they are drawn above the content.
With much respect to all other solutions (which are important to understand), try using the following as an easy fix:
outline: 1px solid black;
instead of
border: 1px solid black;
JSFiddle
Cheers!
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid yellow;
}
I have two elements on my page placed together in columns like articles on a newspaper page. One element is an <aside> tag, with the main content inside of a <section> tag.
The container has a 15px margin to its left that causes it to spill over the right side of the viewport when its width is set to 100%. How can I prevent it from doing just that.
You can see the example from this fiddle: http://jsfiddle.net/spryno724/BHr5F/2/
Note: I know I can use the calc() function to accomplish this task, but given its current browser support, and my audience, I'm not ready to rely on this function.
Easiest Solution is to use padding-left on the .row container instead of margin-left on the content as can be seen in my updated jsfiddle:
div.row {
background-color: rgba(51, 51, 51, 0.9);
display: table-row;
padding-left: 15px;
}
http://jsfiddle.net/BHr5F/4/
Here there are a lot of good answers.
My favorite is:
.container {
width:90%;
margin: auto;
}
Add padding-left: 15px to body element and remove the margin from section.container:
body {
margin: 0;
padding-left: 15px;
}
section.container {
border: 1px solid black;
display: table;
max-width: 100%;
overflow: hidden;
table-layout: auto;
width: 100%;
}
JSFiddle Demo #1
You can also use box-sizing: border-box; to calculate width properties include the padding and border. and remove the horizontal scrollbar:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
JSFiddle Demo #2
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.
http://designobvio.us/vodka/ Live demo
I've set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?
How can I achieve an effect?
HTML
<div id="main">
</div>
CSS (not currently the live code but this is what i've tried )
html, body{height:100%; width:100%;}
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
By default the borders, margin and padding are not part of width/height and are added on top. That's why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box, which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box, which is the default value):
#main {
box-sizing: border-box;
[...]
}
As especially IE8 and the earlier version of the other browser families don't support this css-property, it's a good idea to add some browser-specific definitions, too:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Take a look at the mozilla doku for detailed information on box-sizing.
I know this is an old post, but as it pops up on Google first page... Here is my solution that seems to work fine cross browsers:
height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you're really telling it is "make the box 100% and then add 10px worth of border".
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body { height:100%; padding: 0; margin: 0; }
#container {
min-height:100%;
border-right: 5px solid #000;
border-left: 5px solid #000;
position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
height: 100px;
border-top: 5px solid #000;
background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
height: 100px;
border-bottom: 5px solid #000;
background-color: blue;
position: absolute;
bottom: 0;
width: 100%; /* with absolute position, a width must be declared */
}
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
jsfiddle here: http://jsfiddle.net/Qw2cb/
You can give box-size:border-box; to 'main', like
#main{
box-size:border-box;
}
Doing so the border will be added to 100% height of main. Learn more about box sizing here
So, you are saying that you do not want to display scrollbars?
CSS:
#main
{
overflow: hidden;
height: 100%;
position: absolute;
margin: 0px;
}