Jump to content

Css layout


Little Goat
 Share

Recommended Posts

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

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

all I need is to have it not make a line break in between  the two divs.anyone know how? :) LG

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

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

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

all I need is to have it not make a line break in between  the two divs.anyone know how? :) LG

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

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

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

  • 4 weeks later...
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.

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...