navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Negative margin 3 column layout with internal links

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Negative margin 3 column layout with internal links
Page: [1]
 
JBW

 

Posts: 53
Joined: 3/18/2004
Status: offline

 
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.



Attachment (1)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
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?



_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to JBW)
JBW

 

Posts: 53
Joined: 3/18/2004
Status: offline

 
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.

(in reply to Tailslide)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
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.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to JBW)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
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!

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Tailslide)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
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

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Tailslide)
JBW

 

Posts: 53
Joined: 3/18/2004
Status: offline

 
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.

(in reply to Tailslide)
Tailslide

 

Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
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.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to JBW)
JBW

 

Posts: 53
Joined: 3/18/2004
Status: offline

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

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Negative margin 3 column layout with internal links
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts