CODEWITHSUNDEEP
htmlcsstext
abierto
abierto

Reputation: 1467

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?

Upvotes: 1

Views: 579

Answers (3)

derek_duncan
derek_duncan

Reputation: 1377

Remove your float: left; on your menu element. Also, if you remove your width on your .content and .menu, they text will not overlay the menu.

Upvotes: 0

FrostyFire
FrostyFire

Reputation: 3258

It is because your left div has content that sticks out further than the container. Therefore, your text(right) div is actually right up against the left div like it is supposed to be, but the buttons are extending out of the left div.

To solve this, you either need to resize your button images, or let the left div automatically resize to hold them and the right div just takes all remaining space as explained here.

Hope this helps you!

Upvotes: 0

Nevir
Nevir

Reputation: 8101

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

Upvotes: 2

Related Questions