CODEWITHSUNDEEP
css
revengeance
revengeance

Reputation: 891

CSS divs overflowing. (when resizing browser)

So i have run into some problem, which i can't fix for a while. It's homework for university course and i can't change the html document. Only plain CSS should be applied. The problem is that when I resize my browser. Content div from the right side overflows sidebar div. How can i fix that ? 

.centered-content {
        white-space: nowrap;
        width: 75%;
        min-width: 600px;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(246,246,246,0.9);
        border: 1px solid blue;
       overflow:hidden; 
    } 
        .main-container {
            position: relative;
            float: right;
            border: 2px solid red;
            display: inline-block;
            width: 85%;
            margin: auto;
            white-space: normal; /*Prevents child elements from inheriting nowrap.*/
            }
            #menu-add {
                position: absolute;
                width:15%;
                min-width: 180px;
                height: 100%;
                border: 1px solid green;
                display: inline-block;
            }

1: https://i.sstatic.net/O5zGc.png

HTML DOC in comments.

Upvotes: 1

Views: 782

Answers (1)

Zac
Zac

Reputation: 2211

I see the problem.

The width of #menu-add is 15% The width of the .main-container is 85%

That should be the full even 100%, right?

The issue is that #menu-add also has min-width: 180px. This is an issue because if 180px is more than 15% they will overlap.

To compensate for this you could set a max-width on .main-container to the opposite of 180px. max-width: calc(100% - 180px).

Upvotes: 2

Related Questions