1

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?

aynber
  • 22,380
  • 8
  • 50
  • 63
abierto
  • 1,447
  • 7
  • 29
  • 57

3 Answers3

2

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

Nevir
  • 7,951
  • 4
  • 41
  • 50
  • so my "buttons" will use the `.menu` width instead? – abierto Jan 20 '13 at 21:45
  • If you want that, yeah. If you want a fixed width `.menu` and flexible `.content`, then you don't want to use `%` based widths at all – Nevir Jan 20 '13 at 21:49
0

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!

Community
  • 1
  • 1
FrostyFire
  • 3,212
  • 3
  • 29
  • 53
0

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.

derek_duncan
  • 1,377
  • 1
  • 13
  • 22