4 Replies Latest reply: Sep 11, 2012 3:51 PM by riverwebs RSS

    min-width in body tag

    riverwebs Community Member

      From what I read in this forum, setting the min-width property in the body tag should stop the text in the  #header div from  being displaced out of line as the browser window is squeezed -- see this draft page - www.iprezence.com/paintshop.  When that didn't work I tried applying min-width to all divs in the #header area but still have the problem. What is causing this min-width to fail or am I applying it incorrectly?

       

      Thanks

        • 1. Re: min-width in body tag
          Nancy O. CommunityMVP

          There's nothing actually wrong with what you did.  It's just that when your viewport goes lower than 862px, the header text drops to the line below.

           

          Change min-width from 500px to 862px and your problem is solved.

           

           

          Nancy O.

          • 2. Re: min-width in body tag
            riverwebs Community Member

            Thanks Nancy, I stared at the problem so long I failed to noitice the width was too small.  Now I can't  get the text to remain centered in the header as the window width changes. Is there a margin/padding combo in the .header_text tag that will work? I haven't found it yet.

            • 3. Re: min-width in body tag
              Nancy O. CommunityMVP

              Try this:

               

              body {

                  font: 12px Tahoma, Geneva, sans-serif;

                  background-color:#CACAFF;

                  min-width: 862px;

              }

                 

               

              .header_text {

              font-family:Georgia, "Times New Roman", Times, serif;

              font-size:18px;

              color:#000;

              font-style:italic;

              font-weight:bold;

              width: 200px;

              margin:0 auto; /**width width, this is centered on screen**/

              display:block;

              text-align:center;

              }

               

              Remove duplicate .header_text styles from your CSS.  They aren't helping you.

               

               

              Nancy O.

              • 4. Re: min-width in body tag
                riverwebs Community Member

                Thanks again, Nancy.  I see how the text-align and width work together with the margin to center it all.