Div Fitting The Screen

Discussion in 'CSS' started by Sneakynarb, Nov 4, 2007.

  1. #1
    I know if i want a div to fit the screen, it should be width: 100% - but what do i do if i want it to always have 10px space on the left and 10px on the right - then the div should fit the rest?

    Thanks, in advance.
     
    Sneakynarb, Nov 4, 2007 IP
  2. mariush

    mariush Peon

    Messages:
    562
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Did you try div style="width:100%;margin-left:10px;margin-right:10px;"></div> ?
     
    mariush, Nov 4, 2007 IP
  3. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes. The left margin works, but the right one doesn't.
     
    Sneakynarb, Nov 4, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    No code, leaving me to guess.

    Try a universal reset?
     
    soulscratch, Nov 4, 2007 IP
  5. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    How do you mean, no code? I haven't got a load of code or anything, it's just a simple div with a black background. What is a universal reset?
     
    Sneakynarb, Nov 4, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    Since browsers give different values for either margin or padding, so resetting it to 0 will make it more consistent across browsers.
     
    soulscratch, Nov 4, 2007 IP
  7. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I don't understand how that is supposed to give me a margin of 10px on both sides?
     
    Sneakynarb, Nov 4, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    This is probably what you're looking for.
     
    soulscratch, Nov 4, 2007 IP
  9. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Exactly. Though what does *{} do? And if i wanted say a whole 'container' to be 10px from the sides, not just the <p> tags - what would i do?
     
    Sneakynarb, Nov 4, 2007 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #10
    The * selector targets all elements and applies a margin and padding of 0 to them.

    For your second question, just remove the selector for paragraphs and put it directly on the container.

     
    soulscratch, Nov 4, 2007 IP
  11. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks very much! +rep

    I like to know how/why things work. How come it still fits the screen, even though you haven't put width: blabla?

    EDIT: Sorry i have to spread rep.
     
    Sneakynarb, Nov 4, 2007 IP
  12. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #12
    Because it's a block-level element, and block-level elements take up the full width of their parent element (and the parent element in this case has no padding/margin so it fills the screen).
     
    soulscratch, Nov 4, 2007 IP
  13. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Ah, okay. I understand now. Thanks!
     
    Sneakynarb, Nov 4, 2007 IP