Home/ Questions/Q 6823375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:46:30+00:00

I have the following code: <div id=container> <div id=top>TOP TEXT </div> <div id=middle>MIDDLE TEXT

  • 0

I have the following code:

<div id="container">
   <div id="top">TOP TEXT
   </div>
   <div id="middle">MIDDLE TEXT
   </div>
   <div id="bottom">BOTTOM TEXT
   </div>
</div>

with the following css:

#top { font-size: 13px;}
#middle { font-size: 40px;}
#bottom { font-size: 10px;}

As you can see, the font size are very differents. The problem is that the divs doesn’t appear correctly, because the font size are so big, making the texts appear over the others. The divs doesn’t adjust the heights….I tried with height: auto, I tried changing the divs for spans, with overflow: visible…but I can’t find a solution.
How can I force the div to adjust his height to the big font size?

THE SOLUTION:
Thank you everybody for your ideas. In fact, Shredder, who gives me the link to jsfiddle….show me that the problem is not there. I found some css on the BODY tag that make the problem:

body {font: 75%/125% arial,sans-serif;}

as you can see, this “75%/125%” change the font-height….so there is the problem…
thank you so much!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The text should not overlap If you just have the css and html shown, divs expand to suit their content. With the limited information provided, it could possibly be one of the following (amongst others):
    – the height or max-height of the divs is being set somewhere in your css,
    – the divs are placed using position:absolute somewhere in your css

    • 0