Full width div % problems

Discussion in 'CSS' started by jim25, Sep 5, 2011.

0
  1. #1
    Im sure this is simple but I'm scratching my head, I want a header div to be full width, I have it set to 100%. The problem is when I put content in it like a h1 tag, then minimize the browser the content bursts out of the div. The only way I can stop it from happening is by giving the header div a proper width like 1024px, but I want it to be 100% to suit all screens.
     
    jim25, Sep 5, 2011 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    100% of the body width. OK. What's the body width set to?
     
    drhowarddrfine, Sep 5, 2011 IP
  3. jim25

    jim25 Peon

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have no width set on the body, just margin, padding set to 0. Do I need to set the body to 100% as well
     
    jim25, Sep 5, 2011 IP
  4. jim25

    jim25 Peon

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Set the body width to 100% still the same problem,
     
    jim25, Sep 5, 2011 IP
  5. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #5
    So the body is now set to 100%. 100% of what? The parent of <body> is <html>. What is that set to?

    I got hung up on the body width instead of the 'header'. That's what happens when you don't supply the html or css. Apparently your header is floated? Without the complete markup, anything I say is just a wild guess.
     
    Last edited: Sep 5, 2011
    drhowarddrfine, Sep 5, 2011 IP
  6. jim25

    jim25 Peon

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    There is no width set on the html, not quite sure what your getting at?

    I just want the content to stay where it is when you drag the size of the browser around, without having to use absolute positioning
     
    jim25, Sep 5, 2011 IP
  7. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #7
    A div element should expand the full width of the container on its own. Since you say it's not, I can only assume the div is floated or its contents are but, without a link or the markup, I can only guess.
     
    drhowarddrfine, Sep 5, 2011 IP
  8. jim25

    jim25 Peon

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    jim25, Sep 6, 2011 IP
  9. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #9
    Now I understand. You can set the body or the div to 'width:150%' for example.
     
    drhowarddrfine, Sep 6, 2011 IP
  10. jim25

    jim25 Peon

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thats great thank you!!
     
    jim25, Sep 6, 2011 IP
  11. McStormify

    McStormify Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Have you used any padding in the header? If you have, remove it. That is your problem. If not, post your code for me.
     
    McStormify, Sep 6, 2011 IP
  12. vpsrack

    vpsrack Peon

    Messages:
    34
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    There is only one way to do this as i can think of. Code is below
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    .overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
    } -->
    </style>
    </head>
    <body>
    <div class="overflow">
    <h1 title="Now over flowing">Hello world! this is not my first code. And i am not a pro</h1>
    </div>
    </body>
    </html>
     
    vpsrack, Sep 9, 2011 IP
  13. vpsrack

    vpsrack Peon

    Messages:
    34
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    There is only one way to do this as i can think of. Code is below
    Put below on css:
    .overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
    }

    Put below on Html
    <div class="overflow">
    <h1 title="Now over flowing">Hello world! this is not my first code. And i am not a pro</h1>
    </div>
     
    vpsrack, Sep 9, 2011 IP