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 prevent child element from widening parent element's width in css

    How to adjust table or content in CSS when printing?

    How to stretch the form submit button using CSS?

    Timeline divs not showing in Safari 5

    CSS how to auto adjust width img tag

    How Can I Make The HTML Page More Narrow?

    css how to define a class for table to control the style of table rows

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

    How to handle PNG image loading time in html, css

    How to center webpage content

    CSS how to fill height of container?

    How to avoid this overlapping in plain CSS?

    how to colour user selected option using CSS in Firefox

    How to add styling (CSS) to tags in Javascript/Jquery

    So I have an HTML file with a paragraph and I need to break into three lines BUT i can only modify the CSS. How do I pull this off? (code below)

    How bad is to store all background images in CSS?

    Vertical centering images within a slideshow using JS code?

    How do I keep parentheses of SASS / SCSS mixin?

    How to rotate image when scrolling using CSS transform?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to serve static files for local development in Django 1.4

    android - How to build complex views that stretch?

    ASP Listview. How to hide a table row using CSS

    How to add Navigation dropdown menu?

    How to fade in and out text and css using jquery

    How to top-align smaller inline-block elements next to larger elements?

    How do I achieve a fully working image scrolling effect like in this example?

    How to reverse a CSS3 hover transformation?

    How can I write the javascript script to modify this css file?

    How can I override an external css?