joecoolaug Posted September 15, 2006 Share Posted September 15, 2006 http://www.freewebs.com/joecoolaug/test.htmlAs you can see, at the bottom, the footnote only ends at the left border of the right content div.Instead of doing something like "height:400px;" for each of the div heights, how can I get their height to be equal without having them longer than the content length of the longest div? Link to comment Share on other sites More sharing options...
dorothy Posted September 15, 2006 Share Posted September 15, 2006 Hi joecoolaug,You can use "px" or "%" for height.Please check the code below. Believe this is what you want.I don't like "666666" so I used color Gray.Tested in only IE6 & Firefox. <html><head><style type="text/css">div.container{width:100%;margin:0px;border:1px solid gray;line-height:105%;}div.header,div.footer{padding:0.5em;color:white;background-color:gray;clear:left;}h1.header{height:18px;padding:10;margin:0;}div.left{float:left;width:30%;height:80%;margin:0;padding:1em;}div.content{margin-left:30%;height:80%;border-left:1px solid gray;padding:1em;}</style></head><body><div class="container"><div class="header"><h1 class="header">BLAH</h1></div><div class="left"><h2>This is Left side</h2>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH</div><div class="content"><h2>This is Right side (id: Content)</h2>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH </div><div class="footer"><font size="1">© 2004-2006 joecoolaug inc.</font></div></div></body></html> ----------------------------------------------------------------Sometimes "float" code creates alignment problems in CSS.Hope this works for you.dorothy Link to comment Share on other sites More sharing options...
joecoolaug Posted September 15, 2006 Author Share Posted September 15, 2006 Thank you. I tried using the code from the W3school's example; but it didn't seem to work; and I didn't understand it, anyway. It looks like you got it to work, but I still don't understand what the line-height thing is. Link to comment Share on other sites More sharing options...
dorothy Posted September 15, 2006 Share Posted September 15, 2006 Hi joecoolaug,W3school has nice collection of examples. We have to play around it a little. Line-height is space between two lines. Greater the number more space. For example, your avtar. You have more space between two lines than normal spacing.dorothy Link to comment Share on other sites More sharing options...
Rich57 Posted September 18, 2006 Share Posted September 18, 2006 Hi DorothyI tried your example HTML in Firefox 1.5.0.7 and IE6. Seems that in Firefox smaller text sizes are okay but larger ones overflow the footer. IE6 seems to cope with any text size. I'm sorry I can't offer an explanation for this.Richard Link to comment Share on other sites More sharing options...
ible-white Posted September 19, 2006 Share Posted September 19, 2006 uhhhh... i'm perhaps the least to answer ur question because i'm just starting out with css.but perhaps u can try a repeat-y for your background-image for the main content, then use a matching background-color for your side menu.with that- no matter how much content u have- it will always look the same- perfect. Link to comment Share on other sites More sharing options...
ible-white Posted September 19, 2006 Share Posted September 19, 2006 well- 2day is ur lucky day. i was not looking 4 it. had some css bookmarks and was going thru them 2 find out something. came upon this site and immediately thought about ur question. it basically said what i was trying to say above. look at it here.best regardsDonna Link to comment Share on other sites More sharing options...
joecoolaug Posted September 19, 2006 Author Share Posted September 19, 2006 well- 2day is ur lucky day. i was not looking 4 it. had some css bookmarks and was going thru them 2 find out something. came upon this site and immediately thought about ur question. it basically said what i was trying to say above. look at it here.best regardsDonnaThanks for that, it helped a little bit. I still can't figure out how to get it to work in Firefox after lots of testing. I think I am going to go with a different layout. Thanks for your help, though. Link to comment Share on other sites More sharing options...
ible-white Posted September 19, 2006 Share Posted September 19, 2006 Thanks for that, it helped a little bit. I still can't figure out how to get it to work in Firefox after lots of testing. I think I am going to go with a different layout. Thanks for your help, though. well- dont give up just yet! ur problem may be in the other browser rather than firefox- but thats besides the point.here is a site that i think is great. dont let the site design design turn u off--> the content is fabulous. i'm almost sure you'll find your solution there.click here for itgood luck,Donna 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