I learned HTML in 2000. Since then I have learned XHTML, CSS, FML, some JavaScript, XML, and other languages, as well as various image and animation rendering software. I have launched about six websites since then, but I'm needing some help upgrading/updating to the latest recommendations.

I built my first site using frames, now they are "deprecated." I have tried to move away from them using tables, now they are "deprecated."

Now, I'm trying to launch a new site using only the latest recommendations and I'm having problems.

Although I learned CSS awhile back, it wasn't well supported at the time, so I used it only sparingly. I'm sure everyone here understands the problems related to trying to build a website that renders well on all browsers and screen sizes.

Just to catch up, I just finished a book on the latest recommendations for XHTML and CSS. For the first time, I've really tried to implement CSS to its fullest capacity, something I never really tried before. Although, I've learned how it should work in theory, I've never tried to actually implement it to its greatest extent.

I have a client that has given me a layout for a site that I know how to build the old ways, yet I'm trying to translate that into the newest recommendations.

The site has a banner and navigation links across the top, and two columns underneath. He wants a 1px black border dividing everything up. He also wants the site centered on whatever screen anyone might use.

I tried to construct this site without tables or frames, just using CSS, but ran into some problematic issues with various browsers that I couldn't resolve. Then, I decided that I would use minimal tables and try to do it again, but I'm still having problems.

(When I say I went to minimal tables, I'm saying that I tried to just outline everything with them without specifying anything within them, just <table>, <tr>, <td>, etc. I was hoping that I could define everything else in CSS.)

I tried to layout the site with the block element <div> within the table.

I managed to find a "hack" to solve the issues regarding IE adding onto the width with borders and padding, but I can't seem to cause the border to extend beyond the content of the <div>. I'm also having issues with the background color. I want both columns to match each other as far as the background color and border. I don't want the color to end before the border is drawn, I don't want the border to be drawn before the color ends, and I want both columns to end at the same place regardless of how much content one might have over the other.

This is easily done in tables, but seems to be problematic in CSS (especially with different browsers).

If I specify a width and height to the <div> tag the color goes that far but the border doesn't (the border only goes as far as the content), and the color or the border falls differently in different browsers (possibly because of how each one of them renders the pt and <br /> sizes), thus making whatever defined value of the height for the <div> inadequate.

At this point, I guess I need to explain my "hack" for the border and padding to get the width right in IE.

I didn't include a border or padding in my primary <div> tags for the two columns since they stated a width and height. I created two new <div> tags that didn't state width and height, one for padding and one for the border, and I included them within the primary <div> tags for the two columns. I did this to get around the fact that IE adds padding and border widths. This part works just fine in all browsers.

Maybe what I'm trying to do is impossible. I'm sure it is made more problematic because I want to center the site in every size screen and can't specify absolute positioning with coordinates. I'm just trying to do something that is easily done with tables (or frames).

I don't know if I have explained the situation as clearly as possible, but I hope someone out there knows what I'm talking about.

This is my first time here and I only joined hoping someone had some answers.

Thanks in advance to anyone who bothers to read and respond to this post.

This is easily done in tables, but seems to be problematic in CSS (especially with different browsers).

Actually, it's not problematic at all with CSS.

Can you post a link to what you've got so far ? If not, post the code and the CSS.

I would also suggest the following:
HTML*Utopia: Designing*Without*Tables Using*CSS, 2nd*Edition - SitePoint Books

We can help you, but not without seeing the code.

OK, Here's the code stripped down:

<html>
<head>

<style type="text/css">

body {

width:750px;
margin:0 auto;
}

/* This contains the image banner across the top */

div.banner {

width:740px;
}

/* This this contains the navigation links running below the banner */

div.navigation {

width:740px;
background-color:#FFFFCC;
text-align:center;
font-size:10pt;
font-weight:bold;
}

/* This contains the content in the left column */


div.sidebar {

width:200px;
height:2240px;
background-color:#FFFFCC;
text-align:center;
font-size:10pt;
}

/* This contains the content in the right column */

div.content {

width:540px;
height:2240px;
background-color:#FFFFCC;
text-align:center;
font-size:10pt;
}

/* This creates padding for the individual divisions to overcome the problem with IE adding width to the specified width of the divisions above */

div.pad {

padding:8px;
background-color:#FFFFCC;
}

/* This creates a border for the individual divisions to overcome the problem with IE adding width to the specified width of the divisions above div.pad */


div.border {

border-width:1px;
border-color:black;
border-style:solid;
}


</style>

</head>

<body>

<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<div class="banner">
<div class="border">
<!-- banner image goes here -->
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="navigation">
<div class="border">
<div class="pad">
<div class="pad">
<!-- Navigation links go here -->
</div>
</div>
</div>
</div>
</td>
<tr>
<td style="vertical-align:top">
<div class="sidebar">
<div class="border">
<div class="pad">
<!-- Content for the left column goes here -->
</div>
</div>
</div>
</td>
<td style="vertical-align:top">
<div class="content">
<div class="border">
<div class="pad">
<!-- Content for the right column goes here -->
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Try this:

<html>
<head>

<style type="text/css">

body {
margin: 0;
padding: 0;
font: 101% Verdana, Helvetica, Arial, sans-serif;

}
#container{ /* sets page area, center aligment for IE to center content area */
text-align:center;
margin: 0;
padding: 0;
}

#wrapper{ /* wrapper contains all other page elements, centered */
position: relative;
width:740px;
margin:0 auto;
text-align: left;
border: 1px solid blue;
}

#header{
width: 740px;
height: 100px;
border: 1px dotted orange;
}


/* This contains the image banner across the top */

#banner {
width:740px;
float: left;
}

/* This this contains the navigation links running below the banner */

.navigation {
width:740px;
background-color:#FFFFCC;
text-align:center;
font-size: 65%;
font-weight:bold;
}

/* This contains the content in the left column */


.sidebar {
float: left;
width:200px;
height: 240px;
background-color:#FFFFCC;
text-align:center;
font-size:65%;
border: 1px solid green;
}

/* This contains the content in the right column */

.content {
margin-top: 0px;
margin-left: 235px;
width:500px;
height:240px;
background-color:#FFFFCC;
text-align:center;
border: 1px solid red;
}


.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

</style>
<title>test</title>
</head>

<body>
<div id="container">
<div id="wrapper">
<div id="header">
<div class="banner">
banner image
<!-- banner image goes here -->
</div>
<div class="navigation">
navigation
<!-- Navigation links go here -->
</div>
</div> <!--end header section -->

<div class="sidebar">
sidebar
<!-- Content for the left column goes here -->
</div>

<div class="content">
content
<!-- Content for the right column goes here -->
</div>

<br class="clear" /> <!--clear floats -->
</div> <!--end wrapper -->
</div> <!--end container -->

</body>
</html>

No tables

Thanks LadynRed, but I'm having problems with it.

In IE: the right and left columns don't meet up and there is a white space between. Also, the background color in the left column ends with the content and doesn't continue down to match the length of the content in the right column.

In Firefox and Opera: the right and left columns don't meet up and there is white space between, the left column is laying partly on top of the nav section (moreso in Opera than Firefox), and the background color - as well as the div border - only goes part of the way down the content (about 250px) in each column.

In an old Netscape browser (which I use to check how older browsers render things): the space between the two columns is much greater than in the other browsers, and the background color ends with the content.

I would really like to do this without tables, but I it looks like I'm going to have to use them minimally.

Thanks for trying.

Oops! I see you gave 240px as the height, which explains some of it. I guess I can adjust this but I had this issue before when I tried to give the <div> a height. Since each browser renders font sizes and breaks differently, the height can't be specified to match them all.

Sorry, I didn't really study what you sent before, I just plugged in the content and looked at it. Let me study what you sent a little more. I may have spoke too soon.

I'm going to up the ante a little bit... at the top of the file, I see a mess of containers:

<div id="container">
<div id="wrapper">
<div id="header">
<div class="banner">
...
[etc.]

Thus I figured on a way to assemble a better source order and minimize the number of container elements in use:

Test

Apparently, there's something unusual about the way this BB parses links. The preceding link labelled "Test" points to one of the pages on my personal site that I use for testing stuff.

OK, I've tweaked what you suggested to fit my content and it looks much better.

I'm still having some problems, however.

It looks fairly good in Firefox and Opera, except the background color doesn't seem to run all the way down to the wrapper border and the wrapper border is below the bottom border for the sidebar and content sections.

Where the background color and borders end are different for each browser. If I set the height correctly for one browser, it isn't right for another at the bottom, with background colors and borders ending at different places. Overall, it isn't too bad and the problems are all at the bottom.

I'm having one minor problem and one major one in IE. The minor problem is that the width of the nav section should be increased by one pixel to line up with everything else, but if I correct it for IE, then it is wrong in Firefox and Opera.

The major problem is that for some reason the content column doesn't want to line up directly beside the sidebar column, the top of the content column wants to start at the bottom of the sidebar column.

I'm still checking to see if I made some mistake, but I can't see what. This is not a problem on Firefox or Opera.

Finally, on my old Netscape browser, it is a mess.

I think it I could live with the old browser having problems if I could get it straight on the others.

Persist1, I was responding to LadynRed's suggestions above. I hadn't seen that you had posted as well.

I'm basically just trying to do a two column table with a banner and nav across the top. I'm wanting it to be centered on all screen sizes and for the borders to show. I'm wanting a background color in the nav section and the two columns. AND I'm just wanting to do it without using tables if I can.

The issues I'm seeing with doing it with CSS is that we can't seem to get the color to end at the same place as the border at the bottom, that the columns have to be given a certain height (which varies with each browser), there is some slight width pixel differences, IE requires a hack to get around having it add padding and border widths to the specified width, and I can't get a border to go the full length of the column after the content ends (the color will go as far as the height I've specified, but the border won't.)

It is so easy to do this in tables.

...The magic comes from two places.

First, if you have n elements in your layout, you need to set widths for (n - 1) of those elements - no more, no less. Since we're concerned about three elements:

#main
#content
#sidebar

You only need to set elements for (the first) two. Remembering to leave that third width unset also reduces the chance that your layout will break inexplicably (unless you're also intent on using inline images or child elements with defined widths).

Second, you use a background image assigned to #main for the rule that separates the columns, instead of a border. That way, we don't need to worry about which of the two columns is longer; the rule will lead down the entirety of #main, and we can worry about styling content instead of battling with layout attributes.

#nav was a bit of a challenge (and its visible margins are offset because of an arithmetic mistake on my part). When you want to set up your orient horizontally, you have three choices:

1. Set all of your li's and links to display: block; float: left; and assign widths to everything
2. Set all of your li's to display: inline; and the parent list to text-align: center;
3. Assign id's to all of your li's, set all of your links to display: block; and relatively or absolutely position everything

[1] and [3] only work if you can get a reliable fix on the position of the nav, which in practice means that either its parent element needs to be absolutely positioned, or all of its predecessor elements need to have dimensions and locations of which you can be completely certain (which happens often enough, with practice). Which leaves us with [2]...

However, most inline elements are "non-replaced," which in English means that the rendering engine does not deliberately reference their heights or widths - and due to the limitations of CSS, there's no point to assigning any such dimensions to them.

...But you can get around this by putting nothing but images inside your list items. This works because img is the one element in common use to which width and height are intrinsic, thus making it a "replaced" inline element (e.g. its indeterminate footprint is replaced with the intrinsic dimensions of its content).

And if you want borders to either side of the layout, just remember that the width of (vertical_borders + widths + vertical_padding + vertical_margins) needs to be less than 740 pixels. In your shoes I would add those pixels to the background image, let out the either the left margin or left padding of #sidebar,
let out the right padding of #content, and reduce the width of #content by a corresponding value.

Originally Posted by Som Osog

I think it I could live with the old browser having problems if I could get it straight on the others.

Getting stuff like this to work in Netscape 4 is perhaps the fastest way I know to be driven insane. I refer to it as "Post Netscape Traumatic Disorder" notwithstanding the fact that I've dealt with real PTSD from every perspective a layman can.

Your best options are:

1. "Hide" the styling you really care about from Netscape 4 via @import or using an explicit media type.
2. Use Netscape 4's peculiar JavaScript syntax for styles, which is tedious, but easier than it sounds.
3. Let it blow out.

Given the paucity of Netscape 4's market share (took long enough, dammit), I usually go with Option No. 3.

Originally Posted by Som Osog

Persist1, I was responding to LadynRed's suggestions above. I hadn't seen that you had posted as well.

I just jumped in for grins, and my first reply came at roughly the same time as one of your posts. I'm actually introducing static to the thread (thanks to my timing), so if my approach gets disregarded I won't take it personally.

Originally Posted by Som Osog

I'm basically just trying to do a two column table with a banner and nav across the top. I'm wanting it to be centered on all screen sizes and for the borders to show. I'm wanting a background color in the nav section and the two columns. AND I'm just wanting to do it without using tables if I can.

Images to the rescue! See my notes earlier on background images and using images for nav content.

Originally Posted by Som Osog

The issues I'm seeing... the columns have to be given a certain height (which varies with each browser)...

How so? I might've addressed this in my example, but I'm not 100% certain.

Originally Posted by Som Osog

IE requires a hack to get around having it add padding and border widths to the specified width, and I can't get a border to go the full length of the column after the content ends (the color will go as far as the height I've specified, but the border won't.)

It is so easy to do this in tables.

The hack is only necessary if the terms of the engagement require the same appearance in IE5 as in IE6... if you don't know about centricle : css filters (css hacks) with regard to this issue, you should. Meantime, the behavior in IE6 is standards-compliant, while the behavior in IE5 is not.

Regarding the behavior of background colors and vertical borders, see my example and the posts that explain it.

I agree that when one is accustomed to laying things out with tables, one expects and designs for table-like rendering engine behavior... as opposed to the W-T-F's browsers throw at you when you first start to rely on CSS for all presentation and layout. Given practice with CSS, you'll wonder why you put up with it for so long - the code for dynamic sites is so-ooo much easier to write when you apply the KISS Principle to markup, and the resulting sites ultimately take less time to maintain or visibly alter, too.

You've got my encouragement... all it takes is practice. (And hey - it's not like tables didn't.)

Oh, and one other thing -

The reason my example puts #footer inside #main as a clearing element is partly to do with the background and border problems you were having.

I forget the exact language of the specs, but in practice, the dimensions of floated elements only affect the footprint of the content canvas, not the dimensions of their parent element - unless an unfloated, cleared element is introduce therein.

OK Persist1, it is going to take me some time to understand and try what you are suggesting and I'll have to come back to this later.

Thanks for trying to help me on this. I read about CSS several years ago but have only used it sparingly since then because of the problems it had with different browsers. I thought I understood it, and I guess I did somewhat in theory, but using it to its full extent practically is a different matter.

I just brushed up on it by reading another book for the latest recommendations and launched into trying to convert a site that was laid out in tables into CSS and kept having one problem after another.

Part of the problem is trying to start thinking about everything in a new way and I do understand how powerful it can be - I never liked tables anyway.

BUT, it seems that everytime they depreciate something; frames, tables, etc., they don't provide a perfect replacement for some of the things these were able to do. Actually, part of the problem is getting all these browsers to get their act together.

I really liked the effects you could get using frames. Iframes weren't bad, but Netscape had a problem with them. I know you can accomplish some of what frames could do using overflow in CSS, but it seems they discourage it. Anyway, I still don't feel like we are "there" yet with these block elements. Maybe I'll feel better about it after I've done it for awhile.

Most of the battle designing things over the years has always been trying to have things work and display close to the same on all browsers and screen sizes, and it doesn't seem like it is getting any easier.

Oh, and I wanted to add one more comment. With CSS they were saying we could get away from things like spacer gifs. I think it is interesting that part of your solution, using images, runs counter to that idea somewhat.

I just think it is ironic.

Part of the problem is trying to start thinking about everything in a new way...

The "new way" amounts to thinking of things in terms of structure and/or its relationship to the whole and going from there, rather than thinking in terms of a column here, a column there, and this much negative space.

BUT, it seems that everytime they depreciate something; frames, tables, etc., they don't provide a perfect replacement for some of the things these were able to do.

Neither tables nor frames have been officially deprecated; rather, the recommended scope of their use has been reduced. Tables? Use 'em for data all ya want. Frames? Declare a Frameset doctype and go to town.

As my example demonstrates (and which you welcome to ask me about over IM, if I'm at my desk), making a table-ish layout into a CSS-ish layout can certainly be done, once you account for the differences.

As for frames, most of their common use cases are better handled with XmlHttpRequest.

With CSS they were saying we could get away from things like spacer gifs. I think it is interesting that part of your solution, using images, runs counter to that idea somewhat.

I just think it is ironic.

I agree 100% with the spirit behind that comment. However, there's a notable difference: with the CSS, you're using one presentation attribute to replace another, in a way that seems counter-intuitive. Nowhere does the actual document content get cluttered with meaningless bits, as is the case with spacer GIF's.

(One of the things that has always made me wonder is how I've never needed spacers for any purpose except to force a table cell to its desired width, as opposed to using it for a full-on spacer result; maybe this is just because I was never afraid to put three zillion columns into my layout tables. *shrug*)

The major problem is that for some reason the content column doesn't want to line up directly beside the sidebar column, the top of the content column wants to start at the bottom of the sidebar column.

That is called "float drop" and its going to occur in IE because of it's broken box model. It is not impossible to have boxes butted up against each other in a pixel perfect manner, but it will drive you around the bend because of IE's bad behavior.

Curing Float Drops and Wraps

As for the 'extra' containers.. they were there for a reason.

As for the obsession with 'equal length columns', the easiest solution is the faux columns method:
Any Column Longest - css-discuss

There is no need for spacer gifs whatsoever in a CSS layout. I never use them.