Discuss: In Search of the Holy Grail
by Matthew Levine
- Editorial Comments
202 Help with Broken Layout
I need to place horizontal navigation in the #Header. However, as this contains ‘float’ it causes the #container to collapse for some reason. I have tries to ‘clear:both’, but nothing seems to work. I am reasonably new at css and am really struggling.
Can anyone explain why?
My code is as the original example, with this added menu…
<ul id=“navbar”>
<li class=“page_item”>[url=”#”]Home[/url]</li>
<li class=“page_item”>[url=”#”]Titles[/url]</li>
<li class=“page_item”>[url=”#”]News[/url]</li>
<li class=“current_page_item”>[url=”#”]About[/url]</li>
</ul>
The added css…
#navbar {
float: left;
margin: 0;
padding-top: 5px;
list-style: none;
background: #5DF4C5;
}
#navbar li {
float: left;
margin:0;
padding:0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em; }
#navbar a {
float:left;
display: block;
margin: 0 2px 0 0;
padding: 4px 20px;
color: #369;
text-decoration: none;
border-bottom: none;
background: #5DF4C5;
}
#navbar li a.current_page_item {
color: #369;
background: #fff;
font-weight: bold; }
#navbar li a:hover.current_page_item {
background: #fff;
color: #369;
}
#navbar li a:hover {
background: #369;
color: #fff;
font-weight: bold; }
posted at 07:00 pm on September 27, 2006 by Simon Johnson
203 I modiefied this engine for my use and ...
I have a problem with IE (in FF all works superb). In IE left columns after load is disappear till I move mouse over right column. After them all works without problems. Can someone tell me why?
Here is link do this page:
http://www.dywiz.com/test/arbitraz/
thanks in advance.
posted at 07:49 pm on October 1, 2006 by zbyszek pietras
204 Resizing places left column to the right of the co
First off: love this article. It helped me tremendously. One problem I can’t seem to fix is that when resizing my browserwindow in IE6.0.29 (using the middle top-right browserbutton), the left column ‘forgets’ the margin and is placed to the right of the container area. You can find an example on http://www.niios.nl/test/testpage.php
I really hope you can help me with this.
Kind regards,
Vivienne
posted at 05:49 pm on October 2, 2006 by Vivienne van Velzen
205 Missing left column in IE 7+ Vista RC1
As always a great article. Of course with a new Windows OS (Vista) comes a new IE with new problems, works great on Firefox but on IE 7+ the left column is totally off the page, hidden way left.
posted at 11:57 am on October 3, 2006 by Max Fraser
206 Info on missing column in IE 7
Great article, it has helped me a lot.
As Max Fraser mentioned, the left column has disappeared in IE 7. Just wondering if anyone knows a work around yet?
Cheers
posted at 02:25 am on October 10, 2006 by Free O'Toole
207 Anchor Tag Problem
The holy grail yes, it may be mighty, but it has a little bit of a problem when using anchor tags. I found out this problem while working on a project at work. So I created a test page for you users to check out and see if you can come up with a solution.
http://www.arnoldeqp.com/ala.htm
Travel to the link above, and click on one of the 3 list items in the main part of the page. They read Exclusive Listing, Consignment, and Outright Purchase. If you click on one of those links it will shoot you to that area below on the page using an anchor tag. What happens in the might holy grail is that you get stuck and can seem to get back to the top of the page. It displays everything in the source code, but just chops off the top.
If any of you have a solution for this might problem I would love to hear from you.
posted at 05:11 pm on October 10, 2006 by Brandon Livengood
208 @Anchor Tag Problem
@Brandon Livengood
In regards to your problem check out http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
posted at 10:00 pm on October 11, 2006 by Jeremy Knab
209 CSS DIVS work about as well as a quadriplegic Atta
I just came back to laugh at all the people who still believe CSS DIVS are a great way to layout a site. As usual, a new browser release breaks the ‘hacks’ used to force the layout to work.
While you guys tear your hair out trying to get a simple 3 column expanding layout to work in CSS DIV, I will use tables and feel very relaxed and happy.
TABLES ARENT BROKEN so i wont fix them.
posted at 11:37 pm on October 12, 2006 by Dan Ferro
210 Doesn't work in IE 5.2 for Mac
This is a great attempt at a lean three column layout. However, It doesn’t work at all in IE 5.2 for mac.
posted at 05:00 pm on October 13, 2006 by lauren krzych
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






201 Disappearing content
I implemented the Holy Grail on a site recently and have run into the disappearing content issue when linking to #ids. Is there still no solution for this?
posted at 09:26 am on September 25, 2006 by Aaron Madlon-Kay