HTML and CSS RSS HTML and CSS RSS

How can I use CSS & div instead of table layouts in this case??

Thread Solved
1 2

•
•
Join Date: Oct 2008
Posts: 11
Reputation: MKala is an unknown quantity at this point 
Solved Threads: 0
MKala MKala is offline Offline
Newbie Poster

How can I use CSS & div instead of table layouts in this case??

 
0
  #1
Oct 15th, 2008
I want the height of the right side column (id="menu") stretch down automatically, when the amount of content on the left side (id="page00") makes the "page00" div taller than the "menu" div and/or viceversa. I mean when I enter text and image in "page00" div, I want the height of "menu" div increase dynamically and/or viceversa. Please note that these two divs are inside the "content" div and all of the divs are wrapped into a "wrap" div.
I have the option to use tables for my purpose but I want to get it done via divs and css.

Here is the codes I have used to build a layout for my website:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" lang="fa">
  6.  
  7. <!-- Meta information -->
  8. <head>
  9. <meta content="fa" http-equiv="Content-Language" />
  10. <meta name="keywords" content="" />
  11. <meta name="discription" content="" />
  12. <meta name="author" content="" />
  13. <title>
  14. </title>
  15. <link rel="stylesheet" type="text/css" href="Style.css" />
  16. </head>
  17.  
  18. <!-- Page body -->
  19. <body>
  20.  
  21. <div id="wrap">
  22. 	<div id="header">
  23. 		<div id="logo">
  24. 			<h1><a href="index.html" title="homepage"> 
  25. Subject 
  26. </a></h1>
  27. 		</div>	
  28. 	</div>
  29. 	<div id="content">
  30. 		<div id="menu">
  31. 		<br />
  32. 		</div>
  33. 		<div id="page00">
  34. 		<br />
  35. 		</div>
  36. 	</div>
  37. 	<div id="footer-pa">
  38. 	<div id="footer">
  39. 	</div>
  40. 	</div>
  41. </div>
  42. <body> 
  43. </html>
And The CSS file used is this (style.css) :

HTML and CSS Syntax (Toggle Plain Text) 
  1. body
  2. {
  3. 	background: url("images/010.jpg") repeat;
  4. 	margin: 0;
  5. 	font-family: Tahoma;
  6. }
  7. #wrap
  8. {
  9. 	background-color: #ffffff;
  10. 	width: 820px;
  11. 	padding: 10px 0;
  12. 	margin: 10px auto;
  13. }
  14. #header
  15. {
  16. 	margin: 0 auto;
  17. 	width: 800px;
  18. 	height: 70px;
  19. 	background: #C0C0C0;
  20. 	border-bottom: 1px solid #000000;
  21. }
  22. #logo
  23. {
  24. 	float: left;
  25. 	margin: 30px 0 0 30px;
  26. 	cursor: default;
  27. }
  28. #logo a
  29. {
  30. 	color: #000000;
  31. 	text-decoration: none;
  32. }
  33. #content
  34. {
  35. 	width: 800px;
  36. 	height: inherit;
  37. 	margin: 0 auto;
  38. 	clear: both;
  39. }
  40. #page00
  41. {
  42. 	float: left;
  43. 	width: 600px;
  44. 	height: 100%;
  45. 	background: #DCE9F5;
  46. 	margin: auto;
  47. }
  48. #menu
  49. {
  50. 	float: right;
  51. 	width: 200px;
  52. 	height: 100%; 
  53. 	background: gray;
  54. 	margin: auto;	
  55. }
  56. #footer-pa
  57. {
  58. 	padding-top: 5px;
  59. 	clear: both;
  60. }
  61. #footer
  62. {
  63. 	height: 40px;
  64. 	width: 800px;
  65. 	clear: both;
  66. 	margin: 0 auto;
  67. 	background: #C0C0C0;
  68. }

All of your suggestions, constructive critics and solutions are welcome. But I will be most pleased if someone does the favour to me and gives me the solution to my problem.

Thank you in advance
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 13
Reputation: vishwebdesign is an unknown quantity at this point 
Solved Threads: 1
vishwebdesign's Avatar
vishwebdesign vishwebdesign is offline Offline
Newbie Poster

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #2
Oct 16th, 2008
If you wish to have the page00 div stretch when you add contents to the menu div, place the menu div inside the page00 div itself. If you float the menu div, do not forget to clear it before leaving page00 div.

There are times that you better use divs, but there are also some times that you'll need tables. Choose what you think is the best solution and see whether you achieve what you wanted to.
vish :-)
http://www.vishwebdesign.com/
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 11
Reputation: MKala is an unknown quantity at this point 
Solved Threads: 0
MKala MKala is offline Offline
Newbie Poster

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #3
Oct 16th, 2008
Thank you vishwebdesign for the solution. this is a good maner I have never thought about before!!!

using this solution the height of "Page00" div depends on "menu" div but what if I want the "menu" div stretch down when I add content to "page00" div. I know I can include "page00" in "menu. but is there any way to have both of the specifications mentioned above at the same time !!??
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 11
Reputation: MKala is an unknown quantity at this point 
Solved Threads: 0
MKala MKala is offline Offline
Newbie Poster

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #4
Oct 16th, 2008
I mean can I design it in a way that both of the div heights be equal to each other and their height depend on the div that contains more content?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 211
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 18
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #5
Oct 16th, 2008
To understand you properly, what you are saying is that you would like your menu background (colour) to be the same height as the content (page001)?

If so, I would simply let my #content include the same background as my menu and position it accordingly.

e.g.
#content
{
width: 800px;
margin: 0 auto;
height:inherit;
background: gray;
}

If thats not you want to do, please try explain it a little better and I will assist you as neccesary.

All the best,
Last edited by macneato; Oct 16th, 2008 at 5:01 am.
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 89
Reputation: wickedsunny is an unknown quantity at this point 
Solved Threads: 4
wickedsunny wickedsunny is offline Offline
Junior Poster in Training

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #6
Oct 16th, 2008
hmm ok buddy wht u can do is that keep the height style of that div to 100% so as teh left div will increase it will automatically increase with it
Ayaz Malik
Free online Photoshop/Drawing | Art Community
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 11
Reputation: MKala is an unknown quantity at this point 
Solved Threads: 0
MKala MKala is offline Offline
Newbie Poster

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #7
Oct 16th, 2008
Dear Macneato

Thanks for the suggestion. I think I should use it. but if having the two divs at an equal height according to their content is impossible then I need someone to confirm it and after that I will mark the thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 11
Reputation: MKala is an unknown quantity at this point 
Solved Threads: 0
MKala MKala is offline Offline
Newbie Poster

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #8
Oct 16th, 2008
Dear Wickedsunny

Thanks but...
I have tried that before but it did not work
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 89
Reputation: wickedsunny is an unknown quantity at this point 
Solved Threads: 4
wickedsunny wickedsunny is offline Offline
Junior Poster in Training

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #9
Oct 17th, 2008
ok buddy problem solved i have tested it.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="fa">
  2.  
  3. <!-- Meta information -->
  4. <head>
  5. <meta content="fa" http-equiv="Content-Language" />
  6. <meta name="keywords" content="" />
  7. <meta name="discription" content="" />
  8. <meta name="author" content="" />
  9. <title>
  10. </title>
  11. <link rel="stylesheet" type="text/css" href="style.css" />
  12. </head>
  13.  
  14. <!-- Page body -->
  15. <body>
  16.  
  17. <div id="wrap">
  18. 	<div id="header">
  19. 		<div id="logo">
  20. 			<h1><a href="index.html" title="homepage"> 
  21. Subject 
  22. </a></h1>
  23. 		</div>	
  24. 	</div>
  25. 	<div id="content">
  26. 		<div id="menu" style="height:100%">
  27. 		<br />
  28. 		</div>
  29. 		<div id="page00">
  30. 		  <p>&nbsp;</p>
  31. 		  <p>&nbsp;</p>
  32. 		  <p>&nbsp;</p>
  33. 		  <p><br />
  34. 	        </p>
  35. 		</div>
  36.   </div>
  37. 	<div id="footer-pa">
  38. 	<div id="footer">
  39. 	</div>
  40. 	</div>
  41. </div>
  42. <body> 
  43. </html>

thisis the css for it

HTML and CSS Syntax (Toggle Plain Text) 
  1. body
  2. {
  3. 	background: url("images/010.jpg") repeat;
  4. 	margin: 0;
  5. 	font-family: Tahoma;
  6. }
  7. #wrap
  8. {
  9. 	background-color: #ffffff;
  10. 	width: 820px;
  11. 	padding: 10px 0;
  12. 	margin: 10px auto;
  13. }
  14. #header
  15. {
  16. 	margin: 0 auto;
  17. 	width: 800px;
  18. 	height: 70px;
  19. 	background: #C0C0C0;
  20. 	border-bottom: 1px solid #000000;
  21. }
  22. #logo
  23. {
  24. 	float: left;
  25. 	margin: 30px 0 0 30px;
  26. 	cursor: default;
  27. }
  28. #logo a
  29. {
  30. 	color: #000000;
  31. 	text-decoration: none;
  32. }
  33. #content
  34. {
  35. 	width: 800px;
  36. 	height: inherit;
  37. 	margin: 0 auto;
  38. 	clear: both;
  39. }
  40. #page00
  41. {
  42. 	float: left;
  43. 	width: 600px;
  44. 	height: 100%;
  45. 	background: #DCE9F5;
  46. 	margin: auto;
  47. }
  48. #menu
  49. {
  50. 	float: right;
  51. 	width: 200px;
  52. 	background: gray;	
  53. }
  54. #footer-pa
  55. {
  56. 	padding-top: 5px;
  57. 	clear: both;
  58. }
  59. #footer
  60. {
  61. 	height: 40px;
  62. 	width: 800px;
  63. 	clear: both;
  64. 	margin: 0 auto;
  65. 	background: #C0C0C0;
  66. }


what required was a style overide which is done by adding style tag in the div even with the presence of a class. take a look. its workin perfect for me
Ayaz Malik
Free online Photoshop/Drawing | Art Community
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 11
Reputation: MKala is an unknown quantity at this point 
Solved Threads: 0
MKala MKala is offline Offline
Newbie Poster

Re: How can I use CSS & div instead of table layouts in this case??

 
0
  #10
Oct 24th, 2008
Thank you all very much for considering my problem.

I think with all of the great solutions and constructive suggestions you've brought to me and with the help of you, now it's the time for me to mark the thread as solved.

Thanks and Best Regards
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC