Home/ Questions/Q 7895603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T07:41:00+00:00

I’m using Twitter Bootstrap for my page layout and I want to insert a

  • 0

I’m using Twitter Bootstrap for my page layout and I want to insert a CSS3 Box Shadow in a column.

The only problem I’m having is that the box shadow has a 1px border, and this is enough to cause my second column to wrap to the next line. If I remove the border it aligns up fine.

If I subtract 2px from the column width, it looks exactly how I want. However, I’d like to take advantage of Bootstrap’s fluid layout (which is based on percent rather than pixels), so there’s no easy way to simply make the <div> 2 pixels narrower than whatever it would otherwise be.

I really dislike the way that borders do not stay within an item’s width. Does anyone see a way to have my <div> respect the current width even with borders?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use 

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

    and the border’s width will be added inside the box.

    Here is an example with two divs that have 100×100 sizes and 20px border. The first one has ‘box-sizing’, the second one has not : http://jsfiddle.net/y3zxC/ .

    • 0