Width: 100% Without Scrollbars

css layout width overflow
Nathan Campos picture Nathan Campos · Jun 11, 2011 · Viewed 41.3k times · Source

I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?

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

Answer

thirtydot picture thirtydot · Jun 11, 2011

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.

Related questions

Pure CSS Solution - Square Elements?

If I have a <div> with a relative width (such as width: 50%), is there a simple way to make it have the same width as it does height without resorting to JavaScript?

Read More
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More
CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More