• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 668
  • Last Modified:

Mozilla renders nested divs OUTSIDE parent div

On this page: http://www.aurafellows.net/aura/research3.asp

in the subnav area (the narrow navbarimmediately below the main top navbar), I have links inside divs that are nested inside the subnav div:  
<div id="subnav">
<div id="subnavFloatleft"> <a href="index.asp" id="home">home</a> </div>
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a>
</div>
</div>

They look fine in IE and Opera. But in Mozilla FireFox, the links appear outside the subnav div. Anyone knows why?  Thanks in advance.

Here's the CSS:

#subnav {
     width: 95%;       margin: 1%;
      background-color: white;
      padding:5px;
      font-size:75%;
      color:#666666;
      border: solid #ccc 1px;
     }
#subnavFloatleft {
float:left;
      }

#subnavFloatRight {
      float:right;
      
      } /* so the CONTACT and other buttons float right */

      
#subnav a:link, #subnav a:visited, #subnav a:active {
      font-variant:small-caps;
            /*padding: 6px 10px 8px; */
      background: #fff;
      color: #666;
      text-decoration:none;

      }      

#subnav a:hover {
      font-variant:small-caps;
            /*padding: 6px 10px 8px; */
      background: #b5474a;
            color: white;
      text-decoration:none;
      }
0
polaatx
Asked:
polaatx
3 Solutions
 
ZylochCommented:
This is actually caused because float is not supposed to take up space, so IE is actually rendering it incorrectly (even though it might seem more convenient for your example). You can try this:

<div id="subnav">
<div id="subnavFloatleft"> <a href="index.asp" id="home">home</a> </div>
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a>
</div>
<span>&nbsp;</span>
</div>
0
 
mreuringCommented:
Smaal adition to above code, you do need to make certain the span is accually render below the floats:
<div id="subnav">
<div id="subnavFloatleft"> <a href="index.asp" id="home">home</a> </div>
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a>
</div>
<span style="clear: both;">&nbsp;</span>
</div>
0
 
neesterCommented:
There are a few options here...

You could simply make these changes:

1) REMOVE THE FLOAT LEFT DIV!
2) PUT THE RIGHT FLOATED TEXT BEFORE THE HOME LINK...
3) IT WILL WORK JUST FINE!


Here is teh new CODE:


<div id="subnav">
<div id="subnavFloatRight"> <a href="email_updates.asp" id="emailupdate">email updates</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="contact.asp" id="contact">contact</a> </div>
<a href="index.asp" id="home">home</a>
</div>



You WONT NEED Any Extra Spaces etc...
And it should render 100% fine everywhere!
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
neesterCommented:
To Explain why I said that...

You have the Main Div for the navigation...

Inside that, the text will be LEFT aligned ANWAY.
So...
If you float the text to the right, it will be right aligned...
Then the normal Div text, will fill the spot its meant to, ignoring the right floated text inline with it... Since the floated text - is floated!!

You dont need two floats - unneeded...
You dont need any spaces - thats a waste of HTML and its a bit of a Hack, whereas this is the proper way around the issue.

If you have any problems let me know!

Cheers!
0
 
polaatxAuthor Commented:
Thank you all.

Neester, your solution is the most elegant of all. I couldn't believe how simple you made it. If only I could get the same thing going for the stuff below the subnav div (http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21102601.html)

0
 
neesterCommented:
Glad I could help!

I am checking out the other thread now!

If I can help I will leave a message in there in the next 20 minutes!
:)
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now