Little Goat Posted April 22, 2006 Share Posted April 22, 2006 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 Link to comment Share on other sites More sharing options...
johneva Posted April 23, 2006 Share Posted April 23, 2006 Why dont ya use a fixed width for the nav?Like in this CSS 2 column liquid layout.Hope that helps. Link to comment Share on other sites More sharing options...
Little Goat Posted April 24, 2006 Author Share Posted April 24, 2006 all I need is to have it not make a line break in between the two divs.anyone know how? LG Link to comment Share on other sites More sharing options...
johneva Posted April 24, 2006 Share Posted April 24, 2006 all I need is to have it not make a line break in between the two divs.anyone know how? LG<{POST_SNAPBACK}> You carnt not by doing what your doing cos the overall width is to wide.You have set the width of your container to 100%You have set your nav div to 20%and your content nav to 80%So when your nav div is forced wider the two are then wider than the div containing them so it is forced to the next line.Thats what I would say anyways but I am still new so dont take my word for it.Thanx John Link to comment Share on other sites More sharing options...
aspnetguy Posted April 24, 2006 Share Posted April 24, 2006 You carnt not by doing what your doing cos the overall width is to wide.You have set the width of your container to 100%You have set your nav div to 20%and your content nav to 80%So when your nav div is forced wider the two are then wider than the div containing them so it is forced to the next line.Thats what I would say anyways but I am still new so dont take my word for it.Thanx John<{POST_SNAPBACK}> I would put money on that bet.The width of the Container must be equal to the width of the elements inside. Remember you must account for margins and padding as well. Link to comment Share on other sites More sharing options...
Little Goat Posted April 24, 2006 Author Share Posted April 24, 2006 so if I take the width attribute off, will that work?LG Link to comment Share on other sites More sharing options...
aspnetguy Posted April 24, 2006 Share Posted April 24, 2006 Try reducing the width of #content until it stays on one line.You don't seem to have any padding or margins to worry about that I can see. Link to comment Share on other sites More sharing options...
raimo Posted April 24, 2006 Share Posted April 24, 2006 all I need is to have it not make a line break in between the two divs.anyone know how? LG<{POST_SNAPBACK}> I'm not sure what You are doing? :)try:display: inline;You can't say:margin-bottom:1; or height:128; there must allways be measuring unit with all other values than zero (px, em, cm ..)Real browsers will drop attributes without unit to the trash.margin-bottom: 1px; Link to comment Share on other sites More sharing options...
Little Goat Posted April 24, 2006 Author Share Posted April 24, 2006 ok, how about making the content div take up whatever room is left?LG Link to comment Share on other sites More sharing options...
johneva Posted April 24, 2006 Share Posted April 24, 2006 If you give the nav div a set width and then give the content div a margin-left to align it that will work best.Cos there is no need for the nav div to change size and doing it this way the content will then takeup what ever is left over.Like in the tutorial I gave you a link for. Link to comment Share on other sites More sharing options...
Little Goat Posted April 24, 2006 Author Share Posted April 24, 2006 the thing is, I want the nav bar to get smaller with the page. all I want is to not let the content div go to the next line. thanx for answering.LG Link to comment Share on other sites More sharing options...
Little Goat Posted April 24, 2006 Author Share Posted April 24, 2006 nvm, I just fixed the problem by taking the width off of the content div.thanx anyway. LG Link to comment Share on other sites More sharing options...
yoshida Posted April 25, 2006 Share Posted April 25, 2006 I heard you can also specify the width of the remaining column as width: auto; but I'm not 100% positive. My guess is it would enable you to make one or two columns with fixed width (px), some more with relative dimensions (%) and one that fills all the remaining space. Dynamic page, o marvelous you. :)Slap me in the face if I'm talking nonsense again, me is still noob-ish. Link to comment Share on other sites More sharing options...
Moyley Posted May 18, 2006 Share Posted May 18, 2006 I heard you can also specify the width of the remaining column as width: auto; but I'm not 100% positive. My guess is it would enable you to make one or two columns with fixed width (px), some more with relative dimensions (%) and one that fills all the remaining space. Dynamic page, o marvelous you. :)Slap me in the face if I'm talking nonsense again, me is still noob-ish.<{POST_SNAPBACK}> I have that same problem, I have a banner at the top of 203 px, then two columns below (menu and content) but I need these to drop down the bottom of the browser window. When setting 100% it uses full size of the monitor window, not taking into account the 203px banner at the top.So I need to find the att that will use the remaining space. To see the website in question please head over to http://www.tinkahill.com/pdt/voila Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now