I have an issue where you can clearly see the parent in the top right and top left corners of the child.
I have tried with using overflow: hidden; on parent as well as using border-radius on the child.
The issue is a bit hard to explain but you can clearly see the issue on the fiddle.
https://jsfiddle.net/2Lccaf0u/
edit: Here is an image showing the issue as well (using chrome)
An easy fix would be to make the outer element have a large radius than the inner for only the top portion
body {
background: #000;
}
.outer, .outer2 {
width: 200px;
height: 100px;
border-radius: 15px 15px 5px 5px;
background: #fff;
margin-bottom: 20px;
}
.inner, .inner2 {
background: #111;
width: 100%;
height: 50px;
border-radius: 5px;
}
Edit: It's happening because that is how the browser renders it. Not all browsers will produce the same result.
Here is a Plunker I just created: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview
It is a simple single row layout. What I need is a fixed minimum margin on both sides (left and right) of the row. Let's say 25px. Resizing the window should always show at meast 25px of grey background before and after the row.
I tried modifying the table.container style from:
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
to
table.container {
width: 580px;
margin: 0 25px 0 25px;
text-align: inherit;
}
But it seems it does not work for the right margin (goes out of the page). Any suggestion?
I think the simplest solution would be to use the left and right table borders instead of margin.
Something like the CSS below should do the trick.
table.container {
width: 580px;
border-left: solid 25px #f1f0ef !important;
border-right: solid 25px #f1f0ef !important;
text-align: inherit;
}
Since not all email clients support margin your other option would be to add padding/border to an outer table/tables.
If you have any questions let me know.
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);
Trying to add a box around a menu of links in Wordpress. So far I've got this - which should make a box of 150px x 50px if I am correct. However, while margin, padding, etc, all work, this does not. Why would that be the case? Has width become deprecated in recent CSS?
.menu-header .menu-item {
display: inline !important;
margin: 0px 50px !important;
border-style: solid !important;
border-width: 2px !important;
width: 150px !important;
height: 50px !important;
background-color: #EDEDED !important;
}
Remove display: inline - that will cause problems with setting a size. The element needs to be block level to specify the size.
Also, the CSS can be simplified:
.menu-header .menu-item{
margin: 0 50px;
border: 2px solid #000;
width: 150px;
height: 50px;
background: #EDEDED;
}
display:inline and width 150px collide with each other.
An inline element has at every time the width of it's content.
You could set the display to inline-block when you really need it inline or else to block.
How to give border to any element using css without adding border-width to the whole width of element?
Like in Photoshop we can give stroke- Inside , center and outside
I think default css border properties is center like center in photoshop, am i right?
I want to give border inside the box not outside. and don't want to include border width in box width.
outline:1px solid white;
This won't add the extra width and height.
Check out CSS box-sizing...
The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Depending on your intended browser support you can use the box-shadow property.
You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).
Example:
box-shadow: 0 0 0 1px black; // Outside black border 1px
or
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
One great advantage of using box shadow is you can get creative by using multiple box shadows:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.
I ran into the same issue.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
This answer allows you to specify one single side. And would work in IE8+ - unlike using box-shadow.
Of course change your pseudo elements properties as you need to single out a specific side.
* New and Improved *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
This allows ability to use border and hit multiple sides of a box.
Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.
Use outline to create a border OUTSIDE a div without modifying div width.
Here an example:
https://jsfiddle.net/4000cae9/1/
Notes:
border-box currently it is not supported by IE
Support:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
As abenson said, you can use an outline but one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
With this html:
<body>
<div>A block</div>
<div>Another block</div>
</body>
One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
And the html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
Use padding when there is no border. Remove padding when there is a border.
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}
Essentially, just replace the 2px padding with 2px borders. Div size remains the same.
Usually, layout shifting is the problem.
If you don't need border-radius then outline: 1px solid black; works.
If you do, make the border transparent and change its color when it's supposedto show:
/* RELEVANT */
.my-div {
border-radius: 8px;
border: 2px solid transparent;
}
.my-div:hover {
border: 2px solid #ffffffa8;
}
/* NOT RELEVANT */
.pretty {
color: white;
padding: 10px 20px;
background: #0077b6;
font-size: 16px;
transition: border .15s ease-out;
cursor:pointer;
}
<button class="pretty my-div">
Button
</button>
In your case can you fudge it by subtracting half the border from the padding? (-2.5 from the padding if your border is 5px wide, you can't have negative padding so to go smaller reduce the overall width of the box). You can add an extra 2.5px to the margin to keep the overall box the same size.
I really don't like this suggestion, but I don't think there is a way do handle this cleanly.
Thus, you're trying to achieve the same as the well known IE box model bug? That's not possible. Or you want to support clients with IE on Windows only and choose a doctype which forces IE into quirksmode.
Another option, if your background color is solid:
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}
outline:3px solid black || border:3px solid black
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>