943,654 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > CSS Div help needed
Ad:
Permalink
Jun 7th, 2008
0

CSS Div help needed

Expand Post »
I have a problem with my CSS somewhere. Basicly if i have too much writing in the content div the wording goes under my purple borders rather then moving the borders down to compensate. What have i done wrong? Fairly sure it will be something very obvious!

css Syntax (Toggle Plain Text)
  1. body {
  2. 	text-align: center;
  3. 	min-width: 760px;
  4. 	background: #000000;
  5. }
  6.  
  7. div#wrapper {
  8. 		margin: 0 auto;
  9. 		margin-top: 100px;
  10. 		border: 1px solid #47027B;
  11. 		width: 760px;
  12. 		background: #00000 ;
  13. 		background-position: bottom right;
  14. 		background-repeat: no-repeat;
  15.  
  16. }
  17.  
  18. html>body div#wrapper {
  19. 		height: 100%;
  20. 		min-height: 600px;
  21.  
  22.  
  23.  
  24. }
  25.  
  26. div#logo {
  27. 		float: left;
  28. 		height: 410px;
  29. 		position: relative;
  30. 		top: -10px;
  31.  
  32. 		margin-bottom: -10px;
  33.  
  34.  
  35. 			width: 150px;
  36. 		border-right: 1px solid #47027B;
  37. 		border-bottom: 1px solid #47027B;
  38. 		background: #FFFFF url('images/logo.gif');
  39. 		background-position: center;
  40. 		background-repeat: no-repeat;
  41. }
  42.  
  43. html>body div#logo {
  44. 		height: 100%;
  45. 		min-height: 394px;
  46. }
  47. h1 {
  48. 		color: #E0C480;
  49. 		font-size: 18px;
  50. 		font-weight: bolder;
  51. }
  52.  
  53. h2 {
  54. 		color: #E0C480;
  55. 		font-size: 14px;
  56. 		font-weight: bold;
  57. }
  58.  
  59. b {
  60. 		color: #E0C480;
  61. 		font-weight: bolder;
  62. }
  63. p {
  64. 	color:#FFFFFF;
  65. 	font-weight:bold;
  66. 	}
  67.  
  68. div#footer {
  69. 		width: 760px;
  70. 		clear: both;
  71. 		margin: 0 auto;
  72. 		font-family: trebuchet ms,arial,verdana;
  73. 		font-size: 8pt;
  74. 		font-weight: normal;
  75. 		color: #00000;
  76. 		letter-spacing: 1.1pt;
  77. 		padding-top: 20px;
  78. 		text-align: right;
  79. }
  80.  
  81. div#footer A {
  82. 		color: #00000;
  83. 		font-weight: normal;
  84. 		text-decoration: none;
  85. 		text-transform: uppercase;
  86. }
  87.  
  88. div#footer a:hover {
  89. 		text-decoration: underline;
  90. }
  91.  
  92.  
  93. div#content a {
  94. 		color: #ffffff;
  95. 		font-weight: bold;
  96. 		text-decoration: underline;
  97. }
  98.  
  99. div#content a:hover {
  100. 		text-decoration: underline;
  101. }
  102.  
  103.  
  104.  
  105. div#content {
  106. 		text-align: left;
  107. 		padding: 15px 150px 15px 15px;
  108. 		float: right;
  109. 		width: 400px;
  110. 		height: 100%;
  111. 		font-family: trebuchet ms,arial,verdana;
  112. 		font-size: 9pt;
  113. 		font-weight: normal;
  114. 		color: #00000;
  115. }
  116.  
  117. html>body div#content {
  118. 		min-height: 500px;
  119. 		height: 100%;
  120. }
  121.  
  122. div#topbar {
  123. 		height: 75px;
  124. 		font-family: trebuchet ms,arial,verdana;
  125. 		font-size: 8pt;
  126. 		font-weight: normal;
  127. 		text-align: left;
  128. 		padding-left: 25px;
  129. 		padding-top: 10px;
  130. 		color: #FFFFFF;
  131. 		letter-spacing: 1.1pt;
  132. 		border-bottom: 1px solid #47027B;
  133. 		clear: left;
  134. }
  135.  
  136. div#menu {
  137. 		float: right;
  138. 		width: 760px;
  139. }
  140.  
  141. div#menu A {
  142. 		display: block;
  143. 		width: 225px;
  144. 		position: relative;
  145. 		left:0px;
  146. 		top: -10px;
  147. 		z-index: 50;
  148. 		float: left;
  149. 		border: 1px solid #000000;
  150. 		height: 25px;
  151. 		background: #D4D0c8 url('images/arrow.gif'); 
  152. 		background-position: center left;
  153. 		background-repeat: no-repeat;
  154. 		font-family: trebuchet ms,arial,verdana;
  155. 		text-align: center;
  156. 		font-size: 14px;
  157. 		text-decoration: none;
  158. 		padding-right: 10px;
  159. 		padding-top: 3px;
  160. 		font-weight: bold;
  161. 		color: #00000;
  162. 		text-transform: uppercase;
  163. }
  164.  
  165. div#menu a:hover {
  166. 		background: #423433 url('images/arrow.gif');
  167. 		background-position: center left;
  168. 		background-repeat: no-repeat;
  169. 		color: #c7c2cb;
  170. }
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster
kained is offline Offline
126 posts
since May 2004
Permalink
Jun 9th, 2008
0

Re: CSS Div help needed

ooops forgot to put a link to the page
http://intweb.tech.bcuc.ac.uk/~20318219/deviant/cv.html
Reputation Points: 10
Solved Threads: 0
Junior Poster
kained is offline Offline
126 posts
since May 2004
Permalink
Jun 9th, 2008
0

Re: CSS Div help needed

which one style use for that div tag
Reputation Points: 12
Solved Threads: 34
Posting Whiz
sreein1986 is offline Offline
306 posts
since May 2008
Permalink
Jun 9th, 2008
0

Re: CSS Div help needed

what?
Reputation Points: 10
Solved Threads: 0
Junior Poster
kained is offline Offline
126 posts
since May 2004
Permalink
Jun 9th, 2008
0

Re: CSS Div help needed

Hi Kained,

Simple.

Change the content height attribute to:
height: auto;

Should work. If it doesnt. Let me know. Will look into it further

Regards,
Last edited by macneato; Jun 9th, 2008 at 8:02 am. Reason: typo
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Jun 9th, 2008
0

Re: CSS Div help needed

tried that it didn't work.

I removed all the height and min height tags and the right hand side float in the content div.

HTML and CSS Syntax (Toggle Plain Text)
  1. body {
  2. 	text-align: center;
  3. 	min-width: 760px;
  4. 	background: #000000;
  5. }
  6.  
  7. div#wrapper {
  8. 		margin: 100px auto 0;
  9. 		border: 1px solid #47027B;
  10. 		width: 760px;
  11. 		background: #00000 ;
  12.  
  13. }
  14.  
  15. html>body div#wrapper {
  16. 				min-height: 600px;
  17.  
  18.  
  19.  
  20. }
  21.  
  22. div#logo {
  23. 		float: left;
  24. 		height: 410px;
  25. 		position: relative;
  26. 		top: -10px;
  27.  
  28. 		margin-bottom: -10px;
  29.  
  30.  
  31. 			width: 150px;
  32. 		border-right: 1px solid #47027B;
  33. 		border-bottom: 1px solid #47027B;
  34. 		background: #FFFFF;
  35. 		background:url('images/logo.gif');
  36. 		background-position: center;
  37. 		background-repeat: no-repeat;
  38. }
  39.  
  40.  
  41. h1 {
  42. 		color: #E0C480;
  43. 		font-size: 18px;
  44. 		font-weight: bolder;
  45. }
  46.  
  47. h2 {
  48. 		color: #E0C480;
  49. 		font-size: 14px;
  50. 		font-weight: bold;
  51. }
  52.  
  53. b {
  54. 		color: #E0C480;
  55. 		font-weight: bolder;
  56. }
  57. p {
  58. 	color:#FFFFFF;
  59. 	font-weight:bold;
  60. 	}
  61.  
  62. div#footer {
  63. 		width: 760px;
  64. 		clear: both;
  65. 		margin: 0 auto;
  66. 		font-family: trebuchet ms,arial,verdana;
  67. 		font-size: 8pt;
  68. 		font-weight: normal;
  69. 		color: #00000;
  70. 		letter-spacing: 1.1pt;
  71. 		padding-top: 20px;
  72. 		text-align: right;
  73. }
  74.  
  75. div#footer A {
  76. 		color: #00000;
  77. 		font-weight: normal;
  78. 		text-decoration: none;
  79. 		text-transform: uppercase;
  80. }
  81.  
  82. div#footer a:hover {
  83. 		text-decoration: underline;
  84. }
  85.  
  86.  
  87. div#content a {
  88. 		color: #ffffff;
  89. 		font-weight: bold;
  90. 		text-decoration: underline;
  91. }
  92.  
  93. div#content a:hover {
  94. 		text-decoration: underline;
  95. }
  96.  
  97.  
  98.  
  99. div#content {
  100. 		text-align: left;
  101. 		padding: 25px 25px 25px 200px;
  102. 		width: 400px;
  103. 		font-family: trebuchet ms,arial,verdana;
  104. 		font-size: 9pt;
  105. 		font-weight: normal;
  106. 		color: #00000;
  107. }
  108.  
  109.  
  110.  
  111. div#topbar {
  112. 		height: 75px;
  113. 		font-family: trebuchet ms,arial,verdana;
  114. 		font-size: 8pt;
  115. 		font-weight: normal;
  116. 		text-align: left;
  117. 		padding-left: 25px;
  118. 		padding-top: 10px;
  119. 		color: #FFFFFF;
  120. 		letter-spacing: 1.1pt;
  121. 		border-bottom: 1px solid #47027B;
  122. 		clear: left;
  123. }
  124.  
  125. div#menu {
  126. 		float: right;
  127. 		width: 760px;
  128. }
  129.  
  130. div#menu A {
  131. 		display: block;
  132. 		width: 225px;
  133. 		position: relative;
  134. 		left:0px;
  135. 		top: -10px;
  136. 		z-index: 50;
  137. 		float: left;
  138. 		border: 1px solid #000000;
  139. 		height: 25px;
  140. 		background: #D4D0c8 url('images/arrow.gif'); 
  141. 		background-position: center left;
  142. 		background-repeat: no-repeat;
  143. 		font-family: trebuchet ms,arial,verdana;
  144. 		text-align: center;
  145. 		font-size: 14px;
  146. 		text-decoration: none;
  147. 		padding-right: 10px;
  148. 		padding-top: 3px;
  149. 		font-weight: bold;
  150. 		color: #00000;
  151. 		text-transform: uppercase;
  152. }
  153.  
  154. div#menu a:hover {
  155. 		background: #423433 url('images/arrow.gif');
  156. 		background-position: center left;
  157. 		background-repeat: no-repeat;
  158. 		color: #c7c2cb;
  159. }

sorted!
Reputation Points: 10
Solved Threads: 0
Junior Poster
kained is offline Offline
126 posts
since May 2004

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: quote
Next Thread in HTML and CSS Forum Timeline: simple html form driving me nuts





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC