Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    325
    Thanks
    42
    Thanked 2 Times in 2 Posts

    Taking my shot at faux column but not having luck with border

    Greetings!

    I'm giving faux columns go and for the most part its working out for me. Problem I'm having I gave column 2 left and right borders but and it only goes down to where the end of the text is. I was under the impression using the image as a background would stretch to the height of the tallest column.

    Here's the page:
    http://handlersspot.net/test/index.html

    CSS file:
    http://handlersspot.net/test/faux_three.css

    The rest of it makes sense to me with moving the images start point to coincide with the column. It just I don't under stand why the border doesn't draw all the way to the bottom.

    Thanks for your help!
    Last edited by MrBiggZ; 11-11-2009 at 07:49 PM. Reason: edit

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MrBiggZ,
    Your link doesn't load a page but the CSS file is there. I built some markup to go with it... may or may not be what you had in mind.

    Take this and add height: 400px; to any element and that will make #container expand, along with your background image, to that height.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container{width:73em;border:1px solid #000;padding:0;margin:2em auto;background:#496597 url(http://handlersspot.net/test/83A1D5_back_1200.gif) 22em 0 repeat-y;text-align:left;}
    #header{background-color: #CEDEFF;border-bottom:1px solid #000;margin:0;padding:0 0 0 1em;}
    #background{background:url(496597_back_450.gif) 52.10em 0 repeat-y;float:left;width:73em;}
    #columnone{float:left;width:19em;margin-left:1em;position:relative;}
    #columntwo{float:left;width:30em;margin-left:2em;border-left:1px solid #000;border-right:1px solid #000;}
    #columnthree{float:right;margin-right:1em;width:19em;}
    #footer{clear:both;background-color:#224074;margin-bottom:0;padding:0 0 0 1em;margin:0;border-top:1px solid #000;border-bottom:1px solid #eee;}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
                <div id="background">
                    <div id="columnone"></div>
                    <div id="columntwo"></div>
                    <div id="columnthree"></div>
                <!--end background--></div>
            <div id="footer"></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Ah, the link works now.
    The border you add is the size of the column it's in. The background image is not supposed to expand your #columntwo but give the illusion that it's expanded.

    Does that make sense?


    For that border to work, you would have to add it in the image.
    Like the demo I linked you to before, see the image here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    325
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Ah, the link works now.
    The border you add is the size of the column it's in. The background image is not supposed to expand your #columntwo but give the illusion that it's expanded.

    Does that make sense?


    For that border to work, you would have to add it in the image.
    Like the demo I linked you to before, see the image here.
    Yes .. that does make sense. Actually, you can get a bit creative doing it like that too!

    And my host was acting rather funky today! I was getting 500 errors. Somebody was playing games with something! Ok! Thanks for you help!


  •  

    Posting Permissions

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