Margin-right and width:100% causes scrollbar to appear in WordPress backend

2 Views

I am developing a configuration page for my plugin in WordPress. I created an <ul> element inside a <div> element and placed it on my config page. The problem is, whenever I apply margin-right and width:100% to that div it causes the scroll bar to appear, the width of the list exceeds the total width of the page. As you can see at the bottom of the screenshot.

The effect

Read More

Here are the only styles I am applying (LESS): 

div#pworks-popular-posts-list {
    display:block;
    margin:20px;
    width:100%;
    ul {
        width:100%;
        margin:0;
        background-color:white;
        li {
            display:block;
            div {
                display:inline-block;
            }
        }
    }
}

This is the HTML structure pulled from Chrome Dev Tools:

HTML structure

Could you please help me with this? Thank you.

Post Views: 2

Related posts

3 comments

  1. First of all you don’t need width:100%; because a display:block; div will fill its parent’s width by default. But if you want to specify it for some reason (or you plan on making it display:inline-block; or something) you can use calc() function like this: width:calc(100% - 20px);.

  2. What’s happening is that you are setting the div’s width to be the body’s width. After that you are moving it so it causes your div to go even further and that causes an overflow-X.

    I wouldn’t recommend setting a block element width to 100%. Block elements automatically have 100% width of their parents.

    I would set a container div with a padding: 20px; instead.

  3. Set max-width:100% instead width:100%.
    It will reduce width according to padding.

Comments are closed.