Search code examples
htmlcssalignmentpositioning

The text is hidden from content

I have a problem on my website where a piece of text falls underneath another div.

The problem is in the sidebar, as you can see in the following image. The text on the left side falls under the content, which is on the ride side of it.

enter image description here

Here is a JSFiddle example of the problem: http://jsfiddle.net/j87Gy/

I think that the problem is in the following CSS code, but i'm not sure:

.wrapper{
    height:100%;
    width: 100%;
}

.sidebar{
    width:25%;
    background:#262625;
    float:left;
    height:100%;
    position: relative;
}
Solution

  • I updated your fiddle (http://jsfiddle.net/bukfixart/j87Gy/2/)

    Just remove the line width:100%; in the css from the selector .footer. The class has a padding (5%). If you are using a width, the padding will be added to it, so the sum will be

    100% + 5% (left) + 5% (right) = 110%.

    This will be oversized everytime.