Forum Moderators: not2easy
Structural Illustration - what I want to have
-----------------------------------------------
¦...............................................¦
¦................header.........................¦
¦...............................................¦
--------------- -------------------------------
¦...............¦...............................¦
¦...............¦...............................¦
¦...............¦...............................¦
¦...............¦...............................¦
¦..leftnav......¦..........content..............¦
¦...............¦...............................¦
¦...............¦...............................¦
¦...............¦...............................¦
¦...............¦...............................¦
--------------- -------------------------------
¦...............¦...............................¦
¦...............¦...............................¦
¦...............¦...............................¦
-----------------------------------------------
The issue I'm having is I want to have a border-right on the leftnav column. This border has to go all the way down the page until it reaches the top of the footer (not just down until the bottom of it's content). Applying this property (border-left) on the content column works fine but when the leftnav has more actual content in it the border-left does not continue down to the top of footer. See illustration of what happens when I apply the border-right property to leftnav.
How can I fix this, see HTML and CSS code below?
Structural Illustration - what I do not want to happen
-----------------------------------------------
¦...............................................¦
¦................header.........................¦
¦...............................................¦
--------------- -------------------------------
¦...............¦...............................¦
¦...............¦...............................¦
¦...............¦...............................¦
¦...............¦...............................¦
¦..leftnav......¦........content................¦
--------------- ...............................¦
¦...............................................¦
¦...............................................¦
¦...............................................¦
-----------------------------------------------
¦...............................................¦
¦................footer.........................¦
¦...............................................¦
-----------------------------------------------
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><title>New Site</title>
<meta http-equiv="content-type" content="text/xhtml;charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="default.css" title="default" />
</head><body>
<div id="container">
<div id="header">
</div>
<div id="leftnav">
<p>
menu goes here
menu goes here
menu goes here
menu goes here
menu goes here
menu goes here
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
foo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo bar
foo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo bar
foo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo bar
foo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo bar
foo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo barfoo bar foo bar
</p>
</div>
<div id="footer">
<div class="contact">
<p>
Telephone: <br />
Email: <a href="mailto:?subject=[WEB] Feedback"></a>
</p>
</div>
<div class="copyright">
<p>
<a href="">Copyright</a> © 1996-2004 <br />
<a href="">Privacy Policy</a> ¦ <a href="">Terms of Service</a>
</p>
</div>
</div>
</div>
</body></html>
CSS Code
body
{
margin: 0;
padding: 0; /* Required to eliminate margin borders in Opera. */
color: #333333;
background-color: #FFFFFF;
font-family: arial, monospace, sans-serif, serif;
font-size: 0.8em;
}#container
{
width: 100%;
margin: 0;background-color: #fff;
color: #333;
line-height: 130%;
}#header
{
background-image: url("images/header1.jpg");
height: 93px;
width: 770px;
border-bottom: 1px solid #297ACB;
}#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border: 1px dashed #297ACB;
}#content
{
margin-left: 190px;
padding: 1em;
width: 550px;
border: 1px dashed red;
}#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }/*************************************************************************************
* Page footer, legal notices, etc.
**************************************************************************************/
#footer
{
float: left;
width: 100%;
margin: 0;
padding: 5px;
width: 770px;
color: #333333;
border-top: 1px solid #297ACB;
clear: both;
}/*************************************************************************************
* footer: Contact info and copyright/legal info.
**************************************************************************************/
.contact
{
float: left;
width: 50%;
font-size: 0.9em;
}
.copyright
{
float: right;
width: 50%;
text-align: right;
font-size: 0.9em;
}.contact p
{
margin: 0;
padding: 0;
}.copyright p
{
margin: 0;
padding: 0;
}
[edited by: SuzyUK at 4:02 pm (utc) on July 27, 2004]
[edit reason] fixed scrollism [/edit]
Basicaly, it uses a vertically tiled background image to draw the column borders and backgrounds.
It does mean however, that you can do some nice effects using this technique.
I've created an effect that makes the border between two columns look like the fold in a book (the one in the middle of the pages when you hold a book open).
It can also be used to apply gradients or drop shadow effects to your borders. If you take a look around the blogs of CSS designers you'll see the technique used to very good effect. Take a look at Digital Web Magazine, Dan Cederholm's Simplebits, D. Keith Robinson's Asterisk etc. (Do a Google search for these.)
Only thing that bothers me is why must this be done using an image?
The problem here isn't that CSS doesn't do what you want, it's that the CSS you've chosen to use isn't designed to produce the effect you're after. And the result of the disparity between your desired effect and the purpose of the css property is that something else (read, 'a hack') is needed to bring the two together.
In this case, you've used float to layout your <div>s. Float happens to be my layout property of choice, as well. But float isn't intended to be used to create two equal columns. It's raison d'etre is to allow elements to wrap neatly around other elements, as in text around a picture. This is exactly what it is doing in your layout, allowing the contents of the content <div> to wrap once the float is done (only the margin keeps that text from oozing over beneath the navbar). The faux columns technique simply alters the appearance of the content <div>s background on the left side, giving the illusion of a continued navbar. Hardly a hack at all, really, just some visual trickery.
If your goal is to genuinely have two evenly lengthed columns, you need a method that allows you to do that, such as absolute positioning (bluk!) or tables (triple bluk with an added yick!).
Go with the faux columns. That image can be 1px high and still do the job. It adds hardly anything to the weight of the page and allows you to continue enjoying the fluffy, creamy goodness of floats.
I found it on the CSSCreator website using their automated creator. What it does is for the CONTENT column, it creates a left-border that is the width of the lefthand column. Effect? It looks like you have a colored column extending the full length of the page, without using a faux-column image (which I find rather.. blah.. well, I don't like it. Someone resizes the text on your page and WHAM your design is shot because all the text extends outside the image width).
I would visit csscreator and use their layout generator. It's taught me alot of CSS just figuring out how it creates some of the designs.
By the way, this effect also fixes the "left column content longer than the content column" problem, so that you don't get a short left column color. Basically, the design extends to match WHICHEVER column is longer, without sacrificing the left column color.
You may find it useful for your purposes.
I hope this explanation makes sence.
Someone resizes the text on your page and WHAM your (faux columns) design is shot because all the text extends outside the image width
this (wide border) effect also fixes the "left column content longer than the content column" problem, so that you don't get a short left column color.Basically, the design extends to match WHICHEVER column is longer, without sacrificing the left column color.
It is neat to hear of other solutions to the same problems, although I have my doubts about the stability of using a wide border. You'd have to alter the ie5 box model hack to account for it and funky borders can cause funky collapsing margins issues if you're not careful.
BTW, is it standard in CSS to allow a negative value set for a CSS element property?
is it standard in CSS to allow a negative value set for a CSS element property
Yes. Actually, some really cool things can be done with it, including layout options that can achieve results otherwise impossible (see Ryan Brill's Negative Margins article on A List Apart).
Of course, only certain elements will support a negative value, namely margin, padding and the position values left, right, top, bottom used with relative and absolute position. (there may be others I don't know about).
just a small heads up, Yes it's OK to use negative properties BUT "Unlike margin properties, values for padding values cannot be negative" (my bold - W3C reference [w3.org] - section 8.4 for those on IE)
Interestingly enough when I "plugged" a two col, full stretch, layout into the CSS generator it used the "wide border" technique to generate the faux column, which if used does require the use of negative positioning (float or otherwise) to place the content so I'd say it was a fairly accepted technique and is indeed widespread. And when using it like the 1px overlap technique, or to offset a label for example, is a clever way to achieve what is nothing more than a visual presentation ;)
Suzy
