Render flow of nested DIVs in Mozilla

  • Deef
  • Born
  • Born
  • Deef
  • Posts: 1

Post 3+ Months Ago

Hello,

I just started to design my website with css and layers. But I have some problems with it.

This is the css file:

Code: [ Select ]
div.top{
text-align: left;
width: 97%;
background-color: #FFFFF;
}

div.adv{
width: 480px;
height: 60px;
margin-top: 20px;
float: right;
text-align: right;
}

div.member{
text-align: left;
width: 97%;
padding-left: 5px;
padding-right: 5px;
background-color: #FFFFF
}
  1. div.top{
  2. text-align: left;
  3. width: 97%;
  4. background-color: #FFFFF;
  5. }
  6. div.adv{
  7. width: 480px;
  8. height: 60px;
  9. margin-top: 20px;
  10. float: right;
  11. text-align: right;
  12. }
  13. div.member{
  14. text-align: left;
  15. width: 97%;
  16. padding-left: 5px;
  17. padding-right: 5px;
  18. background-color: #FFFFF
  19. }



The HTML code:
...
Code: [ Select ]
<body>

<div class=top>
<div class=adv></div></div>
<div class=member></div>

</body>
  1. <body>
  2. <div class=top>
  3. <div class=adv></div></div>
  4. <div class=member></div>
  5. </body>

If I preview the website in Internet Explorer everything looks fine, but if preview it in Mozilla, the top and member layer are overlapping eachother. Does anyone know how I can solve this problem?

preview: http://www.huntjens.com/test/template_frontpage.html
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Here's what seems to happen. When you float "adv", to the right, you take it out of the render flow. When it's nested in a DIV, like "top", the two browsers interpret this differently.

The difference is; Does the mass of "adv" get calculated into the size of "top"? IE and Opera say, "yes".

Firefox says, "no", and the following DIV, "member", gets rendered as if "top" was empty. But, it's not. If you add a top margin to "top" you can see that the DIV is still there, and still a container for "adv".

All that being said, I don't understand why you're doing it this way. You can accomplish the same thing like this:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
div.top{
text-align:right;
width: 97%;
background:#CCC;
}

div.member{
width: 97%;
padding-left: 5px;
padding-right: 5px;
background-color: #DDD;
}</style></head>

<body>
<div class="top"><img src="logo.gif"></div>
<div class="member">Content</div></body></html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. div.top{
  6. text-align:right;
  7. width: 97%;
  8. background:#CCC;
  9. }
  10. div.member{
  11. width: 97%;
  12. padding-left: 5px;
  13. padding-right: 5px;
  14. background-color: #DDD;
  15. }</style></head>
  16. <body>
  17. <div class="top"><img src="logo.gif"></div>
  18. <div class="member">Content</div></body></html>
  • mhammadd
  • Beginner
  • Beginner
  • mhammadd
  • Posts: 52

Post 3+ Months Ago

DigitalMedia has a simpler solution for you there, but if you still insist you want to use your style, then what you have to do is switch the orde of your code in the body section..

Your original code:
Code: [ Select ]
<div class=top>
<div class=adv></div></div>
<div class=member></div>
  1. <div class=top>
  2. <div class=adv></div></div>
  3. <div class=member></div>


My way:
Code: [ Select ]
<div class=adv>
<div class=top></div></div>
<div class=member></div>
  1. <div class=adv>
  2. <div class=top></div></div>
  3. <div class=member></div>


Just placed TOP between ADV..
  • evelec
  • Born
  • Born
  • evelec
  • Posts: 1
  • Loc: CAIJ OPAC

Post 3+ Months Ago

Hi Deef,

I had the same problem : Try adding this line in the CSS definition of .top div :

height: auto;



It works for me.

eve

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 91 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.