JamesB Posted November 12, 2014 Share Posted November 12, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
tejasamrute Posted November 12, 2014 Share Posted November 12, 2014 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;} Link to comment Share on other sites More sharing options...
niche Posted November 12, 2014 Share Posted November 12, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
JamesB Posted November 12, 2014 Author Share Posted November 12, 2014 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. Link to comment Share on other sites More sharing options...
Ingolme Posted November 12, 2014 Share Posted November 12, 2014 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 Link to comment Share on other sites More sharing options...
JamesB Posted November 12, 2014 Author Share Posted November 12, 2014 Wow thanks Ingolme that worked perfectly, I used overflow: auto on 2 elements. Thats everything solved, thanks everyone! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now