Improve company productivity with a Business Account.Sign Up

x
?
Solved

Mozilla renders nested divs OUTSIDE parent div

Posted on 2004-08-22
6
Medium Priority
?
670 Views
Last Modified: 2012-06-27
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
Comment
Question by:polaatx
6 Comments
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 400 total points
ID: 11867174
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
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 400 total points
ID: 11867800
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
 
LVL 11

Accepted Solution

by:
neester earned 1200 total points
ID: 11868998
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 11

Expert Comment

by:neester
ID: 11869007
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
 

Author Comment

by:polaatx
ID: 11870044
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
 
LVL 11

Expert Comment

by:neester
ID: 11870096
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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question