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

MrBiggZ · 11-11-2009, 07:39 PM

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!

Excavator · 11-11-2009, 07:54 PM

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>

Excavator · 11-11-2009, 07:59 PM

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.

MrBiggZ · 11-11-2009, 10:09 PM

Quote:

Originally Posted by Excavator

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!