...

View Full Version : Taking my shot at faux column but not having luck with border



MrBiggZ
11-11-2009, 08: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. :confused:

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. :eek:

Thanks for your help!

Excavator
11-11-2009, 08: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.


<!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, 08: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 (http://nopeople.com/CSS/faux_columns/index.html).

MrBiggZ
11-11-2009, 11:09 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 (http://nopeople.com/CSS/faux_columns/index.html).

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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum