1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Auto-Width + 20px?

Discussion in 'CSS' started by Pudge1, Oct 3, 2011.

  1. #1
    I was wondering if you could some how take the width of an element when it is set with CSS to width: auto; and some how add 20px to that width and set that as the width of the element? Or if there is some other way to do this while still accomplishing the same thing?
     
    Pudge1, Oct 3, 2011 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You are unclear. Do you want that there is at least 20px-worth of width inside at all times?

    Or do you want the element 100% wide (which is the default for static blocks whose widths are set to "auto") PLUS 20px more?
    The rest of this post assumes the latter.

    Once you make a static element even wider, it'll pull its container wider, instead of sticking out. So that's no go.

    If you make the element absolutely positioned, it comes out of the flow and you want it to "see" the width of its parent so that it knows it's 100% wide...

    so I'd do this I think

    make the element position: relative; width: 100%; padding: 0 10px; left: -10px;

    that might work. relative positioning creates a whole new box (called the "generated box" in the specs) which sits exactly on top of the original box and takes all of the original box's visual attributes (children, borders, background colours, etc). But the original box is still in the flow, taking up space.
    Setting the box to 100% means when you add padding to it (we added 10px on each side, so 20px in total) it gets added to 100%... if you leave the box "auto" then added padding only reduces the amount of content area inside. Then if you wanted it centered as well, I pulled it back to the left by 10px...

    None of this is tested, just something that sounds right.
     
    Stomme poes, Oct 4, 2011 IP
  3. you-me

    you-me Peon

    Messages:
    67
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    detect the with of browser and than calculate width for your desired width for auto. then you can add 20px in that width.
     
    you-me, Oct 4, 2011 IP
  4. Tedel

    Tedel Well-Known Member

    Messages:
    326
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    130
    #4
    Let me know if this works:

    body
    {margin: 20px}

    #autowidthdiv
    {width: auto}
     
    Tedel, Oct 4, 2011 IP
  5. yho_o

    yho_o Well-Known Member

    Messages:
    353
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    #5
    #youDiv { padding: 0px 0px 0px 20px; width:auto; }
    Code (markup):
    or
    #youDiv { padding-left:20px; width:auto; }
    Code (markup):
    this code will set padding from left to 20px which will increase the div width +20px
     
    yho_o, Oct 10, 2011 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    @yho_o -- no, no it won't. Auto is the default state. That will just pad in the content.

    Though I really think the OP's post is unclear.... I was thinking they were asking for something like "margin-right:-20px;" to make it 20px wider than the auto-width.

    Notice that's MINUS 20px -- dragging the width wider than it's container.
     
    deathshadow, Oct 11, 2011 IP
  7. yho_o

    yho_o Well-Known Member

    Messages:
    353
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    #7
    i added auto, cuz you i do not know the width he is asking for, so he can place his own width + 20 pixels padding i think will does the job
     
    yho_o, Oct 13, 2011 IP