CSS: small problem with float [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

Hihi,

I have a small problem, I´ve done it befo开发者_StackOverflowre but as CSS behave sometimes it´s OK on time but next time it shows a bug.

As you can see the red area (main content) doesn´t flow as it should

I must be missing something but why not post the problem while I go to the grocery store :)

As I say, guess it´s something tiny...

enter link description here

---

The sitebar div has a width of 20%, but also has a border of 1px on both sides. Those 2 pixels are added to the inner width of 20%, so that leaves no 80% for the main div.

So set the width of main on 79%, or add:

margin: 0 -1px 0 -1px;

But since you give the container a fixed width, why then do you style in percentage?

---

#sidebar { 
        display:block; 
        float:left; 
        width:170px; 
        height:auto; 
        min-height:400px;
        background:#f9f9f9;
        border: solid 1px #eaeaea;
        border-radius:10px;
        -moz-border-radius:10px;
}

#main { display:block; float:right; width:766px; height:auto; min-height:400px; background:red; }

Use this css. it will work.

---

I fixed this by setting the width on your red container to width: 79%. Somehow, it overflows when you set it so both make 100%.

Perhaps it would be better to work pixel perfect here and put pixel values instead of using percent, since your container is of a fixed width anyway.

Hope that helps you.