HTML and CSS RSS HTML and CSS RSS

Help CSS & div win table layouts !!

Thread Solved

•
•
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

Help CSS & div win table layouts !!

 
0
  #1
Oct 15th, 2008
I have used the following codes 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. }
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.

All of your suggestions, 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.

PLEASE help.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 258
Reputation: Designer_101 is an unknown quantity at this point 
Solved Threads: 12
Designer_101's Avatar
Designer_101 Designer_101 is offline Offline
Posting Whiz in Training

Re: Help CSS & div win table layouts !!

 
0
  #2
Dec 26th, 2008
hmmm

i would use javascript and tables if i were you.
its a tad difficult to do with divs and css alone.

Even better why not use flash. Stylish and alot more time efficient.

Sorry to not answer you question but i really dont think its worth the effort to acheive the specific look you want.
To conclude: use flash
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Help CSS & div win table layouts !!

 
0
  #3
Dec 26th, 2008
This kind of equal column display works with table, but not with div. Table will automatically make the columns the same height. Div won't do this, because each div has absolutely no logical link to the div next to it.

All of the methods used to try to make divs stay the same height are kludges. The "best" kludge is to read the heights of the two containers with JavaScript, and then have the code adjust the shorter one.

You have the following choices:

1. Use tables. The div is not yet perfected enough to do this.

2. Use kudges to make the columns the same height. This usually means making both columns longer than necessary

3. Don't use distinctive backgrounds or borders to show the edges of the columns. Then it won't matter.

Try this sample code. Then try it again after removing the references to the first four styles (the colors). It doesn't work if the colors show, but it works if the backgrounds are all the same. It also acts up if you remove the titles, or if you use code that introduces incompatibilities between Internet Explorer and Firefox (see below).

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Your title here</title>
  5.  
  6. <style type="text/css">
  7. .bmag {background-color: #ff88ff;}
  8. .byel {background-color: #ffff88;}
  9. .bcyn {background-color: #88ffff;}
  10. .bvio {background-color: #cc88ff;}
  11.  
  12. .bitty {font-size: 14pt;}
  13. .nbor {border: none;}
  14.  
  15. .nocol {width: 100%; padding: 0; border: none; margin: 0;}
  16. .bocol {width: 100%; padding: 0; border: 1px solid #00cccc; margin: 0;}
  17. .twocol {float: left; width: 50%; padding: 0; border: none; margin: 0;}
  18. .ipad {padding: 2pt 5% 2pt 5%; border: none; margin: 0;}
  19.  
  20. .cenimg {text-align: center; margin: 0; border: none; padding: 0;}
  21.  
  22. .cenx {text-align: center;}
  23. .cencap {clear: both;}
  24.  
  25. .bigbk {background: #c0ffff; margin: 0; border: 4px #0000ff solid; padding: 16px;}
  26. </style>
  27. </head>
  28.  
  29. <body>
  30. <div class="bigbk">
  31.  
  32.   <p class="cencap bitty">Main Title 1</p>
  33.  
  34.   <div class="twocol bmag">
  35.     <div class="cenimg">
  36.       <img class="cencap" src="pic1.jpg" alt="Picture 1" />
  37.       <p>Caption</p>
  38.     </div>
  39.     <div class="ipad">
  40.       <p>Picture 1 content</p>
  41.     </div>
  42.   </div>
  43.  
  44.   <div class="twocol byel">
  45.     <div class="cenimg">
  46.       <img class="cencap" src="pic2.jpg" alt="Picture 2" />
  47.       <p>Caption</p>
  48.     </div>
  49.     <div class="ipad">
  50.       <p>Picture 2 content</p>
  51.       <p>Picture 2 content</p>
  52.       <p>Picture 2 content</p>
  53.       <p>Picture 2 content</p>
  54.     </div>
  55.   </div>
  56.  
  57.   <p class="cencap bitty">Main Title 2</p>
  58.  
  59.   <div class="twocol bcyn">
  60.     <div class="cenimg">
  61.       <img class="cencap" src="pic3.jpg" alt="Picture 3" />
  62.       <p>Caption</p>
  63.     </div>
  64.     <div class="ipad">
  65.       <p>Picture 3 content</p>
  66.       <p>Picture 3 content</p>
  67.       <p>Picture 3 content</p>
  68.       <p>Picture 3 content</p>
  69.     </div>
  70.   </div>
  71.  
  72.   <div class="twocol bvio">
  73.     <div class="cenimg">
  74.       <img class="cencap" src="pic4.jpg" alt="Picture 4" />
  75.       <p>Caption</p>
  76.     </div>
  77.     <div class="ipad">
  78.       <p>Picture 4 content</p>
  79.     </div>
  80.   </div>
  81.  
  82.   <p class="cencap bitty">End Title</p>
  83.  
  84. </div>
  85. </body>
  86. </html>

If you put size styles (width, height) in the same tag or style that also contains nonzero surrounding styles (margin, border, padding), it causes the incompatibility between Internet Explorer and Firefox to manifest itself. Some of your styles contain this trouble. Divs placed side by side fall apart when this happens.
Last edited by MidiMagic; Dec 26th, 2008 at 12:36 pm.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

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