Inner border

[JamesB]

Hi there

 

I'm trying to figure out how to add an inner border to 6 boxes on a site I'm making for a friend.

 

Here's what I mean by inner border:

 

 

 

The top left box will have a scrollbar with a lot of content.

 

I've tried adding an inner <div> with a margin 5px but the border-bottom only appears when the content is scrolled to the bottom.

 

I've looked at the outline property but I guess that isn't suitable at it doesn't take up space.

 

Any ideas how I could achieve this?

 

Edit:

Website link: http://ukscifi.mvec.io/

Edited November 12, 2014 by JamesB

[tejasamrute]

div{ -webkit-box-shadow:inset 0px 0px 0px 2px #eeeeee; -moz-box-shadow:inset 0px 0px 0px 2px #eeeeee;

-o-box-shadow:inset 0px 0px 0px 2px #eeeeee;

-ms-box-shadow:inset 0px 0px 0px 2px #eeeeee; box-shadow:inset 0px 0px 0px 2px #eeeeee;

width:800px; /*As per your requirement*/ height:400px; /*As per your requirement*/

background-color:#9e1cda;}

[niche]

I'd try a container div and float as many border divs as you need around a content div and drop the bottom margin on the content.

Edited November 12, 2014 by niche

[JamesB]

Thanks tejasamrute

 

 

I applied a border instead of an outline to all 6 boxes, and used 3 css classes for different sizes.

 

Thanks niche

 

That sounds like a solution too.

For each box I could float 3 divs left, and in the middle one have 3 divs stacked vertically, with border-bottom, border-top etc.

I'd rather use that if there's no other solution as it seems overkill on the html.

 

 

One problem remains though, for boxes 2, 3 and 4 the margin-top 5px appears to apply to the container of .box rather than .box which is very strange.

[Ingolme]

That's called "collapsing margins". You can find a fix for them: http://stackoverflow.com/questions/16485810/how-to-fix-collapsing-top-and-bottom-margins

[JamesB]

Wow thanks Ingolme that worked perfectly, I used overflow: auto on 2 elements.

 

Thats everything solved, thanks everyone!