Negative margin 3 column layout with internal links

Negative margin 3 column layout with internal links (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

JBW -> Negative margin 3 column layout with internal links (6/10/2008 8:03:36)
Hi all, Long time since I've posted here! However, I have a problem with a 3-column CSS layout and I'm hoping somebody here may be able to help. I am using the negative margin approach, which works great. The problem occurs if I have internal links in the page (i.e. using href="#link" to scroll to an anchor of that name on the same page). The content scrolls to the anchor required, but not in the way desired. I have attached a very stripped down version of the code to demonstrate my problem. Open the html page and try clicking on the top link in the page and you should see what I mean. I am hoping that there is a way to get it to scroll to the desired link instead of losing most of the page! Alterantive methods of rendering a 3 column layout would be welcome but the golden bullet would be if the attached code could be remedied. The reason being that the code is already in widespread use and a bottom-up rewrite is not practical. Many thanks in advance, John.

Tailslide -> RE: Negative margin 3 column layout with internal links (6/10/2008 8:38:34)
John Without having to re-create the page from your attached code - do you either have an online version that we could look at or could you describe what it's doing?

JBW -> RE: Negative margin 3 column layout with internal links (6/10/2008 8:59:06)
Hi Tailslide, I have put a version of the template here. It is difficult to say exactly what the problem is except to say that the content does not scroll correctly when using an internal link. Instead of scrolling down to the desired anchor, the top of the content is lost - effectively, the content is cut off above the anchor. Hopefully the demo should make it a little clearer. Many thanks for looking into this. John.

Tailslide -> RE: Negative margin 3 column layout with internal links (6/10/2008 9:07:09)
Ooh freaky! Never seen that problem before. Anyway - removing the overflow:hidden from the main div seems to get rid of the issue.

Tailslide -> RE: Negative margin 3 column layout with internal links (6/10/2008 9:12:46)
Edit: because you remove the overflow:hidden you'll get the background disappearing where there's no content so you may need to employ trickery to get the background image back - either by adding the clearfix class to the containing div or by clearing it with a div etc. Personally I don't use the negative margin method - I float one div left and one right. One of these two divs will have two divs within it. That's not to say that the negative margin method doesn't work - it's popular, I just don't use it!

Tailslide -> RE: Negative margin 3 column layout with internal links (6/10/2008 9:17:55)

Scrap that!

Ok - after a bit of fiddling, I put the overflow back in and removed the massive bottom padding and margins and it seems ok. Try this:

html
{
   overflow-y: scroll; /* Display permanent vertical scrollbar */
}
body
{
   margin: 0;
   padding: 0;
   background: #fff;
   font-family: helvetica, arial, sans-serif;
   color: #5c5c5c;
   font-size: .8em;
}
#main /* Main content area - 3 column layout (left column, main column, right column) */
{
   width: 920px;
   margin: auto;
   padding: 20px 0 0 0;
  background: #ccc;
  overflow:hidden;
}
#leftCol, #mainCol, #rightCol /* 3 columns - negative margin approach to ensure equal length columns */
{
   width: 195px;
   padding: 0 0 0 0;
   margin: 0 0 0 0;
   background: #ccc;
   float: left;
}
#leftCol
{
}
#mainCol
{
   width: 510px;
   background: #e9e9e9;
   padding: 10px 10px 10000px 10px;
   font-size: .85em;
   min-height: 450px;
   _height: 450px;
}
#rightCol
{
}
p
{
   margin: 10px 0;
}
a
{
   text-decoration: underline;
   color: #7b75b5;
}
a:hover
{
   text-decoration: none;
}
ul
{
   margin: 0 0 0 5px;
   padding: 0;
}
li
{
   margin: 0 0 0 15px;
   padding: 0;
}
hr
{
   clear: both;
   color: #1f2271;
   height: 1px;
   margin: 7px 0;
}

TEST page

JBW -> RE: Negative margin 3 column layout with internal links (6/10/2008 9:51:51)
Thanks Tailslide, Your changes do fix the link problem. However, they break the template - the columns continue way below the end of the content. The huge padding and negative margins, plus overflow: hidden on the container div means that the 3 columns should be of equal length and as long as the longest column (so as long as whichever has the most content). Anyway, this all leads me to believe that internal links like that are an inherent problem with the negative margin approach. It seems that it can only be remedied by changing the layout principle; and that there are two solutions: 1 - Go with your approach you mentioned above (or any other 3 column layout). 2 - Avoid using internal links in a template like this. Any more input would be appreciated, but if it looks like this is going to be a headache to fix then I wont ask anyone to lose sleep over it! Thanks again, John.

Tailslide -> RE: Negative margin 3 column layout with internal links (6/10/2008 10:02:02)
Well as mentioned, I don't use the negative margin technique - it looks like it's working in my test page but there's not much in the way of content there. Have a look on this chap's site as he has a few negative margin techniques there: http://www.pmob.co.uk Personally I tend to use faux columns to fake equal length columns rather than setting a height as that's too unpredictable.

JBW -> RE: Negative margin 3 column layout with internal links (6/10/2008 10:12:03)
Many thanks again, Tailslide. I will have a look...

Page: [1]

0.078125