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. ACP/MVP

          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. ACP/MVP

              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.