Css: Width in Percentage and Borders

.faux-borders {    background-color: #f00;    padding: 1px 25%; /* set padding to simulate border */}.content {    background-color: #fff;}

<div class="faux-borders">    <div class="content">        This is the element to have percentage borders.    </div></div>

CSS: Width in percentage and Borders

Use the box-sizing: border-box property. It modifies the behaviour of the box model to treat padding and border as part of the total width of the element (not margins, however). This means that the set width or height of the element includes dimensions set for the padding and border. In your case, that would mean the element's width and it's border's width would consume 30% of the available space.

Support for it isn't perfect, however vendor prefixes will catch most if not all modern browsers:

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

More information can be found on the MDN and Quirksmode.

According to Quirksmode, using the 3 vendor prefixes above (-moz-, -webkit- and -ms-), you get support for all browsers, even IE8.

How to add a border to only percentage of width of element, CSS Trick

I recreated your divider using :before/:after pseudo-elements:

http://jsfiddle.net/thirtydot/E93UE/1/

#staff_list li:first-child:before, #staff_list li:after {
    content: '';
    display: block;
    margin: auto;
    position: relative;
    bottom: -26px;
    width: 500px;
    height: 2px;
    background: #b9b7b6;
}
#staff_list li:first-child:before {
    top: -14px;
    bottom: auto;
}

The numbers need tweaking, and you need to test it when you have more text, but it's probably close enough. I made other changes to help this solution work, compare your original demo to mine.

Pixel Border and Percentage width in Proportion

Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper div that you use to create your border. So the outside div would be 57% (in your example) with a background that is the color of your desired border. Then, the inner div would have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).

How to style CSS for input box's width as a percentage when it has border and padding?

The reason that the width's are not accurate is because they are set to box-sizing:content-box;, which is the default setting for box-sizing. When the width and height are calculated in CSS, the border and padding are calculated on the outside of that width and height, adding additional space even if it's set to width:100%;. In order to counteract this, you simply need to set the element with the border to box-sizing:border-box;. That brings both the border and the padding inside of the width and height calculation.

Try this:

#my-container { width: 500px; }
#first-name-label { display: inline-block; width: 30%; }
#first-name {
   display:inline-block;
   width: 70%;
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

Or if you want to be more specific to just text inputs, try this:

input[type=text] {
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

CSS Syntax:

box-sizing: content-box|border-box|initial|inherit;

Browser Support:

Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing

If you'd like to learn more about this, you can find a very informative article on box-sizing here:

http://css-tricks.com/box-sizing/

http://css-tricks.com/almanac/properties/b/box-sizing/

Div width percentage not working in CSS

This is because of the borders.
If you leave out the borders your div will align.
Using the border-box solves the problem:

 .leftdiv{
box-sizing: border-box; 
width:20%;
border:2px solid blue;
float:left;}

.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}

.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}

The idea of a box-sizing: border box is that it modfies the behaviour of the normal box model to treat the padding and border as a part of the width element. So now when you set the % width the border is already taken into account. This is why now the 20+20+60 amount to 100%.

Additional info can be found in this link

css border-width percentage

You can do what you are after, but using linear-gradients instead of borders.

Use the following markup:

<div class="box"></div>​

And the following styles (example: http://jsfiddle.net/HxbnK/):

.box {
    background-image: linear-gradient(154deg, red 50%, transparent 50%),
                      linear-gradient(26deg, red 50%, transparent 50%);
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 50% 100%;
    height: 100px;
    width: 100px;
}​

Just keep in mind that the .box element needs to be a square for this to work correctly.

---

Related Topics