Side Nav/columns

[benneh]

Hi all,

I've been coding my Side columns (particularly side navs) using Floats, but that forces me to place the HTML before content. I counter this by having internal links to #content at the top of the page.
But I just want to get a second opinion on how people have on this approach.

I find myself having to 'hack' a bit for IE6 with floating side columns because of the 3px bug, but I've been 'told' to avoid absolute positioning.

Do you use absolute positioning instead? Are there any advantages/disadvantages?

Thanks!
benneh

 

[rogersmj]

... but that forces me to place the HTML before content. I counter this by having internal links to #content at the top of the page.

I can't figure out what you mean. Can you clarify?

Typically, if you need a couple columns (one for nav, one for content), yes you would float them. For example:

<div id="nav">
  Nav code/links go here
</div>
<div id="content">
  Content goes here
</div>

#nav {
  width: 150px; float: left;
}
#content {
  width: 500px; float: left;
}

Those would wind up right next to each other. Then you could have a clear: both div after them, you could also wrap them in a margin: 0 auto div with a fixed with if you want to center them on the page, or you could not fix a width for #content and just give it a left margin equal to the width of #nav if you want it to stretch the width of the whole window. There's a number of different options. Floats are very effective if you know how to use them.

Maybe you can be more specific about what you are trying to do, or give an example of what you've tried and what's troubling you?

 

[angelwatt]

I have a horizontal navigation and its HTML comes before the content. I use skip navigation type links for accessibility purposes. This is the most common approach and people using screen readers generally expect it these days.

When I've done horizontal navigation as a sidebar I did floats as well. I try to avoid absolute positioning when possible, but you can use em measurements with absolute positioning, which gives you a little more flexibility than if you were to use px.

 

[benneh]

I can't figure out what you mean. Can you clarify?

Your code pretty much shows what I was trying to say.. By floating the side nav, the HTML code for the side have comes before the #content. So for screen readers to scan down the document, it has to read out the nav first..

Unless, like how angelwatt said above, to have a skip navigation link (which i tend to have at the very top of the page to #content).

By using position:absolute, I can have the HTML in any order I want; I could do:

#header
#content
#sidenav
#auxColumn (or something, secondary level type content).
#footer

This can also allow me to do stretchable page a lot easier with left:0; and right:0; for both side columns.

but you can use em measurements with absolute positioning, which gives you a little more flexibility than if you were to use px.

Please correct me if I'm wrong, but does IE render em slightly differntly to other standard-compliant browsers? I do my font-sizes in ems, but when I play around with browser text resize, IE text tend to increase a little higher... (unless I've done my font-sizes wrong...)

 

[angelwatt]

Please correct me if I'm wrong, but does IE render em slightly differntly to other standard-compliant browsers? I do my font-sizes in ems, but when I play around with browser text resize, IE text tend to increase a little higher... (unless I've done my font-sizes wrong...)

If you put font-size: 100% on the body selector, IE starts to behave with em as other browsers on text resizings. It took me a while before I learned that trick.