Width: 100% Without Scrollbars

It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.

Try googling for "css flexible ( two/three-collumn) layouts".

Here's an example,

<div id="cont">
   <div id="menu"></div>
   <div id="main"></div>
   <div class="clear"></div>
</div>

and the css

#menu{
  float:left;
  height:100%;
  width:200px;
}
#main{
  padding-left:200px;
}
.clear{clear:both;}

The #menu div, will be aligned to the left and have a static width of 200px. The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.

We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.


I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:

box-sizing=border-box

Otherwise I always had a little content and padding pushing past the scroll bar.


You have to remove the margins on the #news item

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;  /*REMOVE THIS*/
    margin-left: 10px;   /*REMOVE THIS*/
    padding: 0;
    -webkit-user-select: text;
}

If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0 !important; 
    padding: 0 !important;
    -webkit-user-select: text;
}

Because you're using position: absolute, instead of using:

width: 100%; margin-right: 10px; margin-left: 10px

you should use:

left: 10px; right: 10px

That will make your element take the full width available, with 10px space on the left and right.