View Full Version : content pushed down in IE, any ideas?

12-26-2006, 08:17 PM
Hi folks,

I have what's probably a common IE problem. My main content is getting pushed down below my right navigation bar. I can't figure it out. You can see it in IE at www.jontakiff.com/jonffbasement.html.

Obviously, the main content is getting pushed down below the right navigation bar. The nav bar is floated right, so the content should float nicely left, but no, in IE6 it drops down. I have attempted playing w/margins and padding for all elements with no results. Any ideas? Here's some of my code which might explain the problem:

The framework w/borders to try to help see the prob...

*{border:1px solid red;}

#everything{margin:0px auto;background:url(images/headfinally5.jpg);background-repeat:repeat;}


#wrap{width:79%;margin:0px auto;text-align:left;border:1px solid black;background-color:black;}

/*rightnav and main section*/

#rightnav{border:0px solid silver;float:right;width:28%;margin:0em 0em;padding:1em 0em .5em 0em;font-size:normal;}

#main {color:black;border:2px solid red;
margin-top:0em;padding:.75em 1.75em;}

/*top navigation section*/


Any ideas? I hate to ask since it's probably not a quick fix but after two hours of trying to figure it out, it's either get help or smash the monitor.

Thanks in advance...

12-26-2006, 10:50 PM
The problem was not within the code that you pasted.

The primary cause is that IE6 expands boxes when contents gets too big.

In your case, residing within your #main, you have several <div class="notes"> like

<div class="notes">
<a href="#helpanchor" onclick="lyrics1();">Lyrics&nbsp;|</a>
<a href="http://www.myspace.com/therobinquivers">

together with the style

div.notes {
border-top:1px solid silver;
margin:1% 0 0 80%;
padding:0em 0em .4em 0em;

I have highlighted the problem in red. With 80% margin this gives you only 20% space for your contents. As you see even in Firefox, these <div>'s don't appear nicely with contents spilling over.
Instead you should use,

div.notes {
border-top:1px solid silver;
text-align: right;
padding:0em 0em .4em 0em;

Now, the main div will still drop when images no longer fit in the liquid area. You might resolve this be e.g. adding some element in your top header with a certain width that you don't want your page to go below.

Hope this helped:)

12-27-2006, 04:42 AM
Koyama, that is in fact the problem. Thanks so much, you saved me at least an hour of troubleshooting and taught me some new stuff.