Auto Resizable Divs with CSS

I use skybluecanvas as my cms, the code below is in my template file, the sidebar div is set at 30% and the main div at 70%, it looks fine now on my pc but if i use a smaller resolution or resize my browser window my sidebar overlaps the main div.

Code:

---

<div id="content-wrap">
    <div id="main" >
        <!--#plugin:fragment(page,view)-->
    </div>
    <div id="sidebar">
        <!--#plugin:fragment(ABOUT-LINKS)-->
    </div>
</div>

---

My main div resizes automatically, how can i make my sidebar and whatever content i have within it do the same. As its a menu within the sidebar any code that can automatically resize my menu text as well would be useful.

My main menu bar across the top does the same, rather than resizing the text to a smaller font, it moves the menu text underneath.

if you look here, select all then resize your window and you'll see what i mean,

Thanks Chris1990

What css code are you using?

sorry,

here is my main css

here is my css for my sidebar menu

Thanks Chris1990

Have you solved the problem? I test the above site and it doesn't appear overlap anymore whereas before Corporate Taxi Services, Contact Us and News were wrapped underneath and got hidden by the middle divs.

No, I haven't changed anything on the site, i'm using my local server.