|
| |
|
|
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
|
|
|
|
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.
|
|
|
|
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
|
|
|
|
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
|
|
|
|
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
|
|
|
|
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.
|
|
|
|
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
|
|
|
|
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...
|
|
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
|
|
|