Search code examples
htmlcsstext

Why DIVS are collapsing with windows size reduction?

I don't know why the text in my HTML page is collapsing inside the menu, here you can find my page in jsfidle.

Some of my HTML file:

<div class="menu">
    item 1
    item 2
    ...
</div>
<div class="content">
    text text text
</div>

Some of my CSS file:

.menu{
float: left;
padding-top: 100px;
width: 20%;
position: relative;
}
.content{
float: right;
padding-top: 100px;
width: 80%;
color: #dddddd;
position: relative;
}

Is it a css problem with the width %? Or something else?

Solution

  • You're defining .menu and .content as being 20% and 80% the width of the window - your containers are being sized properly.

    However, you've set a width of 150px and padding of 30px on your .grezzo nodes, which causes them to expand outside of the .menu div (if the window is too small)

    Try removing the width on .grezzo