Skip navigation
riverwebs
riverwebs Calculating status...
Currently Being Moderated

min-width in body tag

Sep 11, 2012 2:06 PM

Tags: #css #min-width

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

404 Views   4 Replies   Latest reply: riverwebs, Sep 11, 2012 3:51 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Sep 11, 2012 2:11 PM   in reply to riverwebs
    Report

    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.

     
    |
    Mark as:
  • riverwebs
    Currently Being Moderated
    2. riverwebs,
    Sep 11, 2012 3:29 PM   in reply to Nancy O.
    Report

    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.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Sep 11, 2012 3:45 PM   in reply to riverwebs
    Report

    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.

     
    |
    Mark as:
  • riverwebs
    Currently Being Moderated
    4. riverwebs,
    Sep 11, 2012 3:51 PM   in reply to Nancy O.
    Report

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

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points