Welcome to WebmasterWorld Guest from 52.91.39.106

Forum Moderators: not2easy

Message Too Old, No Replies

Columns with even heights, how can it be done?

Columns in layout need to be the same height

     
2:29 pm on Jul 27, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


Hi. I have a CSS structure layout that has a header 2 columns (side by side) and a footer. The first column my leftnav (left navigation) and the 2nd column the main content. See illustration below.

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> &copy; 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]

3:07 pm on July 27, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 6, 2004
posts:86
votes: 0


I think you may find a technique called "faux columns" useful to get your desired effect. The article is by Dan Cederholm and can be found on A List Apart. A search on Google for "faux columns" should throw the article up on the first page (usually the first result).

Basicaly, it uses a vertically tiled background image to draw the column borders and backgrounds.

3:18 pm on July 27, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


Okay thanks. Only thing that bothers me is why must this be done using an image? I guess there is no other support to do this affect as of yet?
3:30 pm on July 27, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 6, 2004
posts:86
votes: 0


Yeah, this seems to be the only way of giving a column a background colour that stretches all the way down. A pure CSS background colour will only go down as far as the content. It won't stretch down to the bottom of the page.

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.)

3:54 pm on July 27, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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.

7:04 am on July 29, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 25, 2004
posts:63
votes: 0


There's another solution to this problem, which I found rather ingenious.

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.

7:41 am on July 29, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 14, 2004
posts:388
votes: 0


There is another way. If you just want a border and no other special graphics, make a border-right on your sidbar and a identical border-left on your content. The add a negative margin so the borders end up in the same x-position, making it look like it is the same border.

I hope this explanation makes sence.

11:48 am on July 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


Someone resizes the text on your page and WHAM your (faux columns) design is shot because all the text extends outside the image width

Not true. Since the text is contained in a floated <div>, which itself requires an explicit width, scaling up the font size will simply extend the left column <div> DOWN, with more frequent line breaks. It's actually the very picture of accessibility. The text in the left nav never actually touches the image used to create the faux column. remember, the left floated <div> has it's OWN background, that just happens to MATCH the left positioned image background in the wrapper <div>.

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.

This is the reason Cedarholm came up with the faux columns technique! It's the very thing it's design to fix. If the left nav is shorter, the image background on the wrapper <div> is visible below it, visibily extending the column. If the left nav is longer, that image background on the wrapper <div> stays covered up. Fluidity.

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.

1:51 pm on July 29, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


Thanks to everyone for there response. I've used the background image solution and it works great. I've actually tried using the two border solution but not a fan of that, since you have to create a negative property. However I am interested in this CSS Creator solution. It sounds pretty cool but I start to question it based on createErrorMsg response to it.

BTW, is it standard in CSS to allow a negative value set for a CSS element property?

2:26 pm on July 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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).

8:28 pm on July 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


>>Negative margin..

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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members