I have this jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/ which explains my problem.
I want the menu items along the top to be 20% of the window but I also want them to have a 1px right border.
As you can see it's slightly out, this is very noticeable.
----------------------------------------------
| menu 1 | menu 2 | menu 3 | menu 4 | menu 5 |
----------------------------------------------
| row one needs to be same |
----------------------------------------------
I don't think a percentage border would work because then it wouldn't be consistent with different window sizes.
Does anyone have any suggestions as to how I can accomplish this?
You can simulate your percentage borders with a wrapper element where you would: set wrapper element's background-color to your desired border colour. set wrapper element's padding in percentages (because they're supported) set your elements background-color to white (or whatever it needs to be)
With the CSS box-sizing Property The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!
Set the CSS box-sizing property to border-box to make width and height include the content, border, and padding. This allows you to set width: 100% and still add padding or border . In other words box-sizing: border-box makes width include everything between the inner edges of the margin.
Using inline-block property: Use display: inline-block property to set a div size according to its content.
For this you can use css box-sizing
for this:
like this:
#nav_1232938 li, .row {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I just ran into a project where I had to do the same thing. Although box-sizing is probably the best answer, I decided to use generated :after elements (because of some issues specific to my project).
I set the li's (width + padding) x number of li's to equal 100%, then absolute positioned 12px width, 100% height li:after elements to top:0, right:-6px; of each li. Li:last-child was floated right so that it always lines up flush with the boxes beneath (browsers calculate fractional pixel remainders from percentages differently so sometimes you have a space on the far right of your floated elements, even if the elements' width adds up to 100%), and li:last-child:after was set to display:none.
Here's an edit of your js fiddle as an example: http://jsfiddle.net/DZLTJ/12/
Notes: In my page, the padding set in % would never be smaller than the :after element's width set in px, so the content box would never be obscured.
Box-sizing and :after are supported in all browsers post i.e. 7, but :last-child actually has less support, no i.e. 8. Like I said, box-sizing is probably a better choice, but in my case the absolutely positioned after element was a better fit -- thought it would be worth mentioning in case it was for anyone else too.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With