SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    width set automatically

    The code below at http://dot.kr/x-test/layOut/05/ has width:400px.
    Code:
    #navigator {
    width:400px;
    padding:2px 10px 2px 10px;
    border:1px solid #555;
    margin:auto;
    background:#fff;
    }
    I don't like to fix the width as 400px.
    I like to make it the background:#fff box can be automatically set by the length of the text ( (navigator) sun > earth > asia (ancestors of Korea ) inside the navigator box as the code above has padding:2px 10px 2px 10px;,.

    If I remove width:400px; like the code below at http://dot.kr/x-test/layOut/06/ which has not width:400px. the white navigator box spreads to the end.


    How can I make the white navigator box to be centered with padding:2px 10px 2px 10px;?

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Set a percentage width and make sure there's enough room to accomodate the padding and margins as padding + margin + border + width = total width.

    Code CSS:
    #navigator {
    width:96%;
    padding:2px 10px;
    border:1px solid #555;
    margin:auto;
    background:#fff;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    #navigator {
    width:96%;
    padding:2px 10px;
    border:1px solid #555;
    margin:auto;
    background:#fff;
    }
    As I apply your code, the result of it at http://dot.kr/x-test/layOut/07/ shows the width of padding-right is bigger than 10px.
    How can I make the width of padding-right in the white navigator box 10 px?

    I like to put the white navigator box in the center of the green horizontal box.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The padding for the container is 10px on each side and not bigger. If you set the width to 96 (or some other) percentage, then that's the width you'll get...

    Anyway, if you don't want the <div> container to expand to the available width and not set some kind of value for it, then you can change its display to inline or inline block. That way, the container will always be as wide as its content. And if you want the whole thing centered, then add text-align:center to the parent.

    Code CSS:
    #navigatorWrap {
    margin:0 1px;
    border:1px solid #555;
    background:#ffff88;
    padding:5px 0;
    text-align:center;
    }
     
    #navigator {
    display:inline;
    padding:2px 10px;
    border:1px solid #555;
    background:#fff;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, kohoutek. it works fine.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •