Jump to content
Sign in to follow this  
MatthewMarichiba

boxes wrap incorrectly when adding DIV border shadow in CSS

Recommended Posts

MatthewMarichiba

Hi, I added a border & shadow to my box DIVs by adding the following to the Custom Code setting. .fbox { padding:10px 10px 10px 10px; border:1px solid #DDDDDD; box-shadow:2px 2px 3px #CCCCCC; } I like this effect. The trouble is that now the boxes wrap incorrectly. For example, if I set the page to have 2 columns of boxes, it comes out 1. If I set the page to 3 columns, it comes out 2. My guess is that the drop shadow is adding a few pixels of width to the box entity, making it wider than the theme expects, and thereby forcing the box DIVs to wrap prematurely. (The example below is set for 2 columns.) I'd appreciate some advice on how to set the boxes so they size & wrap themselves correctly. As always, thanks for the help! Matthew QA5w9.png

Share this post


Link to post
Share on other sites
cshoffmann

I think you may need to try this: Adjust the following variables in the css. . . .dcol_2 { width: ?; margin-left: ?; } by reducing the width, the margin-left or a little of both I think in theory your boxes will align.

Share this post


Link to post
Share on other sites
MatthewMarichiba

Thanks Shaun, those indeed do the trick. (And the effect looks nice too.) Here's the CSS I used to set things straight: /* Create a default style with box outline, rounded corners, and drop shadow */ .fbox { padding:10px 10px 10px 10px; border:1px solid #DDDDDD; box-shadow:2px 2px 3px #CCCCCC; border-radius:15px; margin-bottom: 10px; } /* Adjust the width of the boxes so that they fit in the columns with their additional padding & shadow */ .dcol_2 {margin-left: 10px; width: 450px; } /* originally 20 & 470 */ .dcol_3 {margin-left: 10px; width: 286px;} /* originally 20 & 306 */ .dcol_4 {margin-left: 10px; width: 200px; /* originally 20 & 225 */ }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×