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..

    Show text-decoration when hover over div

    How can I make a CSS selector for a button with two classes existing in .less?

    How to arrange the elements of a semicircle in css/html/js

    how to read the following css class

    How to center 2 or more divs on the same line? (css)

    a[title] not showing expected result [closed]

    How to access smarty variable in css URL attribute?

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How to extend this navigation bar off the page?

    How to use css to put an item just above the top of the screen?

    How to access element inside div in jquery and make exanding div transparent

    How to uniformly darken colors?

    How to make css menu width impossible to change when zooming or changing resolution?

    how can i add class to errorsummay without remove header message

    Background hover showing in CSS

    How to make cross-browser compatibility with IE10 and IE11?

    How do I add CSS styles to an ASP.NET UserControl from the code-behind?

    How to set a background color defined as a CSS class (using JQuery eventually)?

    How to use JS to target specific domain html links with CSS classes?

    How can I give each
  • its own bullet image?
  • How to share CSS StyleSheet amongst projects?

    In CSS, how to create automatic section numbering only when there are multiple sections?

    How to align with css

    How do I make a text input non-editable?

    How do I get a CSS class to show up in my javascript with my previous method?

    Ionic 2 - how to make ion-button with icon and text on two lines?

    Border-bottom showing on top

    How to get background img to show up in :after selector?

    How to prevent anchor tag from following the link on click, but make it show the submenu?

    How to stop css class on textbox