SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Location
    Ohio
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border effect techniques

    Normally with my container divs I have always just used background images to produce the following effect:



    However, recently I have thought about just using two divs to create the same effect. Along the lines of the following:

    Code:
    #contain
    {
    	background-color: #ffffff;
    	width: 815px;
    	height: 100%;
    	margin: 0 auto;
    	padding: 0;
    }
    
    #content
    {
    	background-color: #1a1a1a;
    	width: 800px;
    	height: 100%;
    	margin: 0 auto;
    	padding: 0;
    }
    This will work, but whenever more content is added to the div#content it will eventually just span past both divs because 'height: 100%.' Both divs will only be 100% of the viewport, while the text will keep spanning, as follows:



    I knew the above would produce the following results, so I had tried a few different things. The first thing I did was:

    Code:
    #contain
    {
    	background-color: #ffffff;
    	width: 815px;
    	min-height: 100%;
    	margin: 0 auto;
    	padding: 0;
    }
    
    #content
    {
    	background-color: #1a1a1a;
    	width: 800px;
    	min-height: 100%;
    	margin: 0 auto;
    	padding: 0;
    }
    This will work when there is more content than the original viewport can handle, however when there is significantly less content, or not content at all, I received the following results:



    I am fairly certain this is because div#content will span a minimum height of 100% of div#contain and div#contain also has a minimum height of 100%, however div#content can't determine 100%, therefore it just spans as far as there is content (basically height: auto I'm assuming).

    So to try and help div#content figure out how far it needed to span I went ahead and changed my styles to the following:

    Code:
    #contain
    {
    	background-color: #ffffff;
    	width: 815px;
    	height: 100%;
    	margin: 0 auto;
    	padding: 0;
    }
    
    #content
    {
    	background-color: #1a1a1a;
    	width: 800px;
    	min-height: 100%;
    	margin: 0 auto;
    	padding: 0;
    }
    The results still came out in a inappropriate manner as intended:



    CSS:
    http://www.zsevans.com/ZEstyle.css
    HTML: http://www.zsevans.com

    So this is where I am at right now. I've tried quite a few combinations, but none that will allow both #contain and #content to dynamically adjust the height when more content is added, but also maintain a minimum of 100% when there is no content.

    I'm not even sure it is possible but I will continue to work on this and keep everyone updated in case I find a possible answer.

    This was just an example I was trying to create because I wanted to stay away from using a lot of images and I wondered if it would save load time if I just used another div to create a border effect instead of use a 1 pixel (in height) image.

    If anyone knows, would it be more efficient to use an extra div to create a border effect, or a background image to create a border effect?

    Any comments, criticism, suggestions are welcomed. Hopefully this post can help people, or someone can get something out of it as I continue to work this out.


    Zack

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe let the container use borders to fake the white background and then be the dark background of #content to fake it continue down:
    Code CSS:
    #contain
    {
    	background-color: #1a1a1a;
    	width: 800px;
    	min-height: 100%;
    	margin: 0 auto;
    	padding: 0;
    	border: solid #fff;
    	border-width: 0 8px 0 8px;
    }
     
    #content
    {
    	width: 800px;
    	min-height: 100%;
    	margin: 0 auto;
    	padding: 0;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Location
    Ohio
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good call, I'll check it out. Thanks.

    Zack

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    100% height is explained in detail in the faq and you need to understand how it works before you can use it properly . You can't set 100% height on your container because that will limit it to 100% only and no more. Content will just spill out underneath and be ignored. You could utilise this effect by letting the inner element expand through its parent but the results may be unreliable as some browsers may ignore anything outside the parents initial 100%.

    You can use min-height:100% for good browsers (and height for ie6 in an IE only rule) but you won't be able to nest any more containers inside this because you can't base a percentage height on an element that doesn't have height set and min-height doesn't count.

    You don't actually need to nes any extra containers anyway as #content is superfluous to requirements and you simply need to apply white borders to the main container and give it a background color.

    This is all the code you need and #content can be removed.

    Code:
    #contain
    {
        background-color: #1a1a1a;
        width: 800px;
        min-height: 100%;
        margin: 0 auto;
        padding: 0;
        border:8px solid #fff;
        border-top:none;
        border-bottom:none;
    }
    * html #contain{height:100%}
    The element will be an initial full 100% high and will also grow with content if it exceeds the height. Read the faq on 100% height as it explains this in detail (there are more examples in the 3 column sticky thread at the top of the page also).

    Hope it helps

    Note: This is effectively the same code that erik has offered above but #content is redundant and not required

    Edit:


    I also forgot to mention that you should remove the xml declaration from above the doctype because it throws ie6 into quirks mode and breaks the layout. It's optional anyway so leave it out. There musn't be anything above the doctype at all or IE will break.

  5. #5
    SitePoint Member
    Join Date
    Aug 2008
    Location
    Ohio
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm ashamed I just didn't think to put borders on my container and that I was trying to nest divs to create this effect. I even knew I couldn't use a percentage based height inside an element that didn't have a discrete height and still tried to find a hack to do it =]

    Thanks Erik and Paul for helping me optimize.

    Zack

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zse
    Yeah, I'm ashamed I just didn't think to put borders on my container
    Don't worry about it it's always the simple things that get overlooked - I do it all the time looking for a more complicated solution than was needed


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
  •