Css / Negative Margins

[owatagal]

I'm using some code from A List Apart that allows me to put the main content first in the HTML, followed by the navigation menu. On screen, the navigation menu is on the right-hand side of the screen and is a fixed width, while the main content area is fluid width. ALA's suggestion was the only thing I've seen that allows that to work, but it relies on negative margins.

 

My problem is that the negative margins do not always come out right when the page is displayed -- sometimes the main text slides under the navigation menu on the right. It doesn't seem to be browser specific -- sometimes this happens with Firefox on Mac, other days not. No real reason that I can see. IE on PC is the same-- sometimes, sometimes not. Usually a page refresh fixes the problem, but how many visitors will bother to try that "just in case"? It seems worse with slower connection speeds, although why connection speed would influence how a browser interprets CSS is beyond me.

 

To see the page in action -- h*tp://crankywoman.net

 

Any ideas on how to get the browser to pay more attention to the negative margins and keep the text from sliding under the nav menu? I'd be willing to try a completely different approach to this as well--the important thing here is that the navigation menu is after the main content in the HTML and that the main content area has a fluid width (I can do this fine with a fixed-width content area, but I'm tired of fixed-width).

 

The ALA article I used is at h*tp://www.alistapart.com/articles/negativemargins They've closed their discussion and unfortunately I think they don't archive old discussions or I'd see if it was already seen and solved there.

[surefire]

You've specifically asked how to make negative margins work, and I don't have an answer to that exact question. But the bigger issue you're trying to resolve is structuring your html so that your content comes before your navigation... ostensibly so that you get better search engine rankings.

 

I can help point you in the right direction on that one.

 

I've had very good success lately making css layouts play nice (enough) with both browsers I test, IE and Firefox. The rules I follow are simple:

• Use opposing floats
  
• Avoid box model issues by using extra divs
  
• Give the layout some room for error
  

Opposing floats:

 

<content>

asdf...

</content>

<sidenav>

link

link

</sidenav>

 

CSS would look something like this

 

#content {

float: left;

width: 60%;

margin: 0;

padding: 0;

}

 

#navbar {

float: right;

width: 38%;

margin: 0;

padding: 0;

}

 

You notice that 38 and 60 adds up to less than 100%. This is my fudge factor. Even though I avoid the box model issues by using extra divs (hacks work fine too, I just don't like 'em) I don't see any reason to push things to perfection and risk breaking the layout when you really can't tell the difference. Especially since I'm almost always using faux columns in the background. The borders of these divs are invisible to the visitor.

 

If you want to switch the layout, and put navbar on the left, just switch the floats.

 

Floats come with their own set of rules and you may have to do a little research to understand how to clear floats in your layout to get things back to "normal" so you don't get unexpected results with div containers that follow your floats.

 

There are plenty of ways to clear floats, one easy one is to use CSS for the div that follows the two floated sections:

#footer {

clear: both;

}

 

Hope that helps.

[owatagal]

Surefire,

 

That's a far more elegant solution than the negative margins. And I agree-I'd rather throw in extra divs than box model hacks as well.

 

Right now, because my nav bar is a fixed width (250px or something), I only have one image making up the faux columns -- it's set as a background image on one of the extra divs and just runs down the right-hand side of the page. I'd worry, if the nav div was also a fluid width (38% instead of a fixed 250px) it would sometimes be too large and overblow its background image/the faux column effect. How are you handling the faux columns with two percentage-based widths? Background images on two divs, I suppose, instead of one. I'll play around with it and see-- I definitely like your simpler approach.

[surefire]

I usually have a container div that is a fixed width, centered in the middle of the screen. So the percentages work off the container div, not the screen width. But you could remove my percentages and put in hard values if you wished.

 

The nice thing about the percentages is that I can take the same strucutre, move it to another site, change the pixel width of the centered container div, and my content and nav adjust accordingly.

[owatagal]

That makes sense. Most of my sites have the container div and fixed width too. The problem I'm having is when I take away that container div/fixed width -- I want the main content area to expand/contract with screen size while the nav area remains a fixed width so I can create a faux column effect -- and still keep nav after content in the HTML.

 

I think that's why the author of the ALA article went with negative margins -- you can float the main content area left, leave its width at 100% (so it still takes up all the available screen), but add a negative right margin to make room for the fixed-width nav box to move up next to it.

 

I'll keep playing with floats, though. Your comments have given me a couple ideas for rethinking my approach here.