How do I get a div to fill the width regardless if the brower window is shrunk?


Tags: html,css

Problem :

I can't get my divs to fill up the entire with of the browser it will only fill up the width of the screen you see. It does not fill the entire width if you scroll the browser when shrunk. On the surface it looks like its working but if you shrink the browser and move the scroll bar to the right you can clearly see it is flawed. I have tried min width, width 100% , margin and padding 0

http://jsfiddle.net/BdQvp/159/

    <html>
    <head>
    <title>Untitled Document</title>
    <style type="text/css">
    body { margin: 0; padding: 0;background-color:#00F;}
    div {margin: 0; padding: 0;background-color:#F00;}
    span{font-size:30px;}
    </style>
    </head>
    <body>
    <div>hello</div>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello.<br><br><br><br>
    <span>
watch as u shrink the window and move the scroll bar to the right that the red div stops and does not fill the width of the browser only the width of the screen............ <br>                                   <br>
    How do I get the red div to fill the width regardless if the browser window is shrunk?
    </span>
    </body>
    </html>


Solution :

The problem you are having is that the purple div is wider then the screen, so it adds the bottom scroll bar. One way to fix this is to wrap all the text in a block element (In this case i used a <p>), and give it a width of 100%.

CSS:

p{
    width:100%;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

HTML:

<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello.
    <br>
    <br>
    <br>
    <br>
    <span>
        watch as u shrink the window and move the scrollbar to the right that the red div stops and does not fill the witdh of the browser only the width of the screen............ 
        <br>
        <br>
        How do I get the red div to fill the width regarless if the brower window is shrunk?
    </span>
</p>

JSFiddle Demo


    CSS Howto..

    How to style HTML paragraphs with CSS to prevent empty lines between them?

    How to apply last-child only for first nested li?

    making div inside div and put it right-bottom corner how?

    How would you go about placing li in different divs?

    How does this pure CSS tab work?

    How to programmatically download all contents of webpage, not only the source code in Java

    How to elasticity of the char length in javascript or css? [duplicate]

    How to DRY Sass code using variables?

    HTML, CSS. Show the second node first before the first node in MOBILE site

    How can I develop a CSS based layout that is 100% browser compatible?

    How can I use :nth-child() to select every other
    within ALL children?

    How often is the default font size in the browser not 16px?

    How can I use JQ to pick out a parent whose child is hr.strong?

    How to put an image in div with CSS?

    How to add wikipedia in to a wordpress plugin

    How to set div using Z-index and fix css

    How to break this Javascript into seperate CSS classes?

    How to make a resizable menu centered on the middle?

    How to remove a specific class on the clicked control?

    How to calculate total size of all css,js and html pages separately uing shell script?

    How to show hidden div in the same line as the paragraph text?

    How to make margin collapsing work with input type=button/submit?

    How to prevent HTML elements from being pushed down the page

    How do I keep my background image at the bottom of the page?

    CSS: How to produce rounded boxed list

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    How do you make a filter for images that have tags?

    how you can change the style of the page without changing CSS files?

    jQuery show multiple image thumbnail before upload

    How to set out css properly?