SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border Inside Div

    Hi
    I have a large white div as a header. The background of the site is blue. I want a 1px grey border around the div, but inside it by 10px all round.
    An image should be attached for you.
    Obviously I could use this as a background image. Just wondering if there's a better way?
    Thanks
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this?
    Code:
    .header{background:#fff; padding:10px;}
    .inner-header{border:1px solid grey;}
    Code:
    <div class="header">
    <div class="inner-header">
    This one will have the border
    </div><!-- /.inner-header -->
    </div><!-- /.header -->

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I adapted your suggestion a little by just putting a 10px margin around the inner header as I've got a menu in the header div that I didn't want the border around, but thanks very much for putting me on the right track!

    Code:
    #header {
    	background: #fff;
    	height: 480px;
    	
    }
    
    #innerHeader {
    	margin: 10px;
    	border: 1px solid #ccc;
    	height: 408px;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •