95% width and 200px margin?

Discussion in 'CSS' started by wd_2k6, Aug 4, 2008.

  1. #1
    Hi how can I give an element a constant gap of 200px to the right but it will take up 100% of the remaining space ?

    I tried:

    abc { width: 100%; margin-right: 200px; }

    but it still spans 100% across the whole page and ignores the margin!! I simply just want a gap to the right, maybe i still need a wrapper div even if this is the case?

    I understand it could be done if i did shoved it in a 100% wrap and didnt set a width to abc but can it be done without the wrapper divvy?
     
    wd_2k6, Aug 4, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    What is abc? If it's a normal block level element, it will only need margin.

    cheers,

    gary
     
    kk5st, Aug 4, 2008 IP
  3. Thomas_Horton

    Thomas_Horton Member

    Messages:
    163
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    35
    #3
    Hi wd_2k6,

    Just put #abc { width: 80%; margin-right: 200px; } ?

    Or isn't this what you are looking for?

    A wrapper would be a solution to:

    #wrapper { width: 100%; }
    #abc { width: 100%; margin-right: 200px; }

    Margin-right: 200px; would then have effect on your abc div.
     
    Thomas_Horton, Aug 5, 2008 IP
  4. WatchCount.com

    WatchCount.com Active Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #4
    I'd vote for the wrapper solution. I've always had problems getting consistent results across browsers when playing around with div placement.

    Theoretically you should only need to specify margin-right, and abstain from mentioning the width, and you should be ok. But, maybe a wrapper div with padding-right is the way to go.
     
    WatchCount.com, Aug 5, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    He's asking what TAG is #abc being assigned to.

    If it's a DIV, or you just set display:block, the normal behavior of a display:block element is to occupy the complete remaining space AFTER margins and padding, so just:

    #ABC { margin-left:200px; }

    Assuming it's on something that is already display:block; (which being you are trying to set a width on it that's a fairly safe assumption since elements set to display:inline do not accept width) That should be ALL you need to set. It's a play on George Carlins "Not every ejaculation deserves a name" - Not every element needs a width. I repeatedly see people going nuts tossing widths on everything when 99% of the time you only need it on your outermost container since the default behavior of display:block elements is to fill the width of their parent element

    The only other possibility you'd need width would be if you are using a table for layout, in which case if it's a table - well, then you are instantly made of /FAIL/

    But again, as Gary implied, CSS without the HTML that goes with it is pretty much gibberish.
     
    deathshadow, Aug 7, 2008 IP
  6. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    QFT

    Really it is driving me nuts when I see all these bloated stylesheets that could be like 50% shorter. One of the common redundant mistakes is assigning width to all elements, which is not needed as by default, an element that displays as block takes all remaining space.
     
    risoknop, Aug 8, 2008 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Then, there are all the self-styled web designers who insist on specifying the height of damned near everything, instead of simply allowing nature to take its course.

    What it is, is failure to understand how html and css work—at the basic levels.

    :shrug:

    gary
     
    kk5st, Aug 8, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    ...or, if it's the best way to set Haslayout. Wherever there's a width: 100% in my stylesheets, it's for that reason.

    I often have % widths on things in forms, for instance for floats who do NOT automagically spread to 100% width, but need to be just wide enough to prevent inline elements from following after them, while also still having a margin on the thing for spacing purposes.

    <offtopic>
    I wonder what a cake made out of /FAIL/ tastes like. Sounds like an interesting ingredient.
    </offtopic>
     
    Stomme poes, Aug 10, 2008 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Ok, one other good reason.

    The cake is a lie.
     
    deathshadow, Aug 10, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    We do what we must, because, we can.
     
    Stomme poes, Aug 11, 2008 IP