OK, I have a site I am converting from tables to css and it works ok until I make the window smaller. the problem is that I use percentages, and if I make the window smaller, that percentage is not big enough to hold on of the words, making it wider than the percentage, which pushes the other column down below.html:
<html><head><title>RMG Music</title><link rel="stylesheet" href="styles.css"/><body><div id="head"> <h1>RMGMusic.com</h1></div><div id="container"><div id="links"> <h2 class="links">Navigation</h2> <a href="#">HOME</a><br /> <a href="links\shtmsrmg.htm">Sheet Music</a><br /> <a href="music\music.htm">Music</a><br /> <a href="links\abtrmg.htm">About Composer</a><br /> ........</div><div id="content"> <p style="text-align:center;">Lorem ipsum dolor....</p></div></div></body></html>
the problem is the h2 in the links div. when the percentage I assigned to that column gets smaller with the window, the div would get too small to hold the word Navigation. instead, it stays the width of that word. the content div takes up the rest of the screen and since its percentage isn't how much is left, it gets pushed underneath. I tried using <nobr> , but that makes the content one long line.css:
/* whole document */body{background:url(gradientturquoise.jpg);}div{float:left; padding:2;}/* end Whole *//* Links Column */#links a, #links a:hover, #links a:link, #links a:visited, #links a:active{text-decoration:none; margin-bottom:1; width:100%; background-color:#222222;}#links a:link {color:#ffffff;}#links a:visited {color:#cccccc;}#links a:hover {color:#f0f0f0; text-decoration:underline; background-color:#666666;}#links a:active {color:#000000;}div#links{width:20%; background-color:#000000; height:100%; overflow:show; font-size:125%;}#links h2{background-color:#c0c0c0; color:#333333; text-align:center; margin-bottom:1;}/* end Links *//* Header */div#head{text-align:center; width:100%; height:128; background:url(music011.gif); font-family:bradley hand ITC,forte;}div#head h1{font-size:500%; color:white;}/* end Header */div#content{width:80%; background-color:#eeeedd; height:100%; overflow:show;}div#container{height:100; overflow:show; width:100%}
tnx in advance , LG