HTML and CSS RSS HTML and CSS RSS

div does not inherit correct width

Reply

•
•
Join Date: Jun 2009
Posts: 1
Reputation: kevosull is an unknown quantity at this point 
Solved Threads: 0
kevosull kevosull is offline Offline
Newbie Poster

div does not inherit correct width

 
0
  #1
Jun 30th, 2009
I have some nested divs which user percentages for sizing the width. The divs are floated for positioning which works fine. The problem is that one of the divs (sub-content) which contains two floated divs sized at 35% and 65% does not occupy the same width as the divs above and below it, resulting in the border being out of line with everything else. this is what it looks like in firefox:

http://www.tracethisbook.com/images/firefox.tiff

and here's what it should look like, as displayed in safari

http://www.tracethisbook.com/images/safari.tiff

The relevant code is below. I've included a few small bits of inline styling as well as relevant CSS so I didn't have to include all of the CSS files.

html Syntax (Toggle Plain Text) 
  1. <div class="content">
  2. 	<div class="content_header"><h2 class="header_text">View Traces</h2></div>
  3. 	<div class="nav">
  4. 	       <!-- nav bar stuff -->
  5. 	</div>
  6.         <div class="internal_content">
  7. 	     <div class="sub_header rounded_top"><h2 class="sub_header_text">Details for Trace</h2></div>
  8. 		<div class="sub_content">
  9. 			<div class="book_details">
  10. <div style="float:left"><img class="book_cover" src="" /></div>
  11. 				<div style="float:left" class="trace_details">
  12. 					<table class="info">
  13. 						<!-- table displaying book details -->
  14. 					</table>
  15. 				</div>
  16. 			</div>
  17.                         <div id="trace_details">
  18. 				<table class="list">
  19.                                     <!-- table shown more info -->
  20.                                 </table>
  21.                         </div>
  22.                 </div>
  23. 	<div class="sub_footer rounded_base"></div>
  24. </div>
  25.  
  26. .content{
  27. 	border-style:solid;
  28. 	border-width:1px;
  29. 	border-color:022c82;
  30. 	margin-left:1%;
  31. 	margin-bottom:10px;
  32. 	padding-bottom:10px;
  33. 	background-color:white;
  34. }
  35. .internal_content{
  36. 	width:98%;
  37. 	padding:10px;
  38. }
  39. .sub_header{
  40. 	width:100%;
  41. 	background-image:url(/images/sub_header.gif);
  42. 	height:30px;
  43. }
  44. .sub_footer{
  45.         width:100%;
  46. 	background-image:url(/images/sub_header.gif);
  47. 	height:30px; 
  48.        clear:both;
  49. }
  50. .sub_content{
  51. 	border-style:none solid none solid;
  52. 	border-width:1px;
  53. 	border-color:bebeff;
  54. 	padding:5px;
  55. 	height:auto;
  56.         float:right;
  57. }
  58. .book_details{
  59. 	width:35%;
  60.         float:left;
  61.         clear:left;
  62. }
  63. .trace_details{
  64. 	width:65%;
  65. 	min-width:300;
  66. }

I think I've including everything above. Does anyone have any idea why this renders fine in Safari, but not in Firefox. Also, in Opera, the trace_details and book_details divs render with their smallest possible widths and the border on the sub_content div is even further out of line. Any help would be greatly appreciated.
Thanks,
Kev
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: div does not inherit correct width

 
0
  #2
Jul 2nd, 2009
First things first. You dont have "#" before your colours. Secondly, the tracy_details class, min-width, does not have a unit. To be totally honest i can't see what is going on, i would help you, if you get setup some bg colours and some content holders just to make it a little clearer.
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: Jul 2009
Posts: 12
Reputation: Magicianer is an unknown quantity at this point 
Solved Threads: 0
Magicianer Magicianer is offline Offline
Newbie Poster

Re: div does not inherit correct width

 
0
  #3
Jul 3rd, 2009
Remove padding from .internal_content and add padding-left:10px to .sub_header
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,193
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 162
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Sensei

Re: div does not inherit correct width

 
0
  #4
Jul 8th, 2009
You forgot that margins, borders, and padding are added OUTSIDE the width and height styles. This makes the inner objects too big to fit in your container if the width percentages add to 100%.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 22
Reputation: FeralReason is an unknown quantity at this point 
Solved Threads: 0
FeralReason FeralReason is offline Offline
Newbie Poster

Re: div does not inherit correct width

 
0
  #5
Jul 8th, 2009
1) Remove the "float:right" from the sub_content div to get it to fill the width of the internal_content div.
2) Add a "float:right" to the trace_details list to get this to position properly (which you have as an ID and should change to a class as previously mentioned.) I'm assuming this is the div containing the "location, reader, rating, etc." content.
3) When I do this, I still see that the divs contained by the sub_content div flow outside of aub_content boundaries (not sure if you see this with the content present and whatever DOCTYPE you are using.) Adding an "overflow:auto" to the sub_content div keeps these contained divs from flowing outside of the box.

Here is modified code. Took out the images and substituted background colors & labeled the divs so that the whole thing is easier to see.

Let me know if this helps.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.         "http://www.w3.org/TR/html4/strict.dtd">
  3. <HTML>
  4. <!-- http://www.daniweb.com/forums/thread200673.html -->
  5.  
  6. <HEAD>
  7. <STYLE type="text/css">
  8.  
  9. .content{
  10. 	border-style:solid;
  11. 	border-width:1px;
  12. 	border-color:022c82;
  13. 	margin-left:1%;
  14. 	margin-bottom:10px;
  15. 	padding-bottom:10px;
  16. 	background-color:white;
  17. }
  18. .internal_content{
  19. 	width:98%;
  20. 	padding:10px;
  21. 	background-color:yellow;
  22. }
  23. .sub_header{
  24. 	width:100%;
  25. 	background-color:red;
  26. 	/* background-image:url(/images/sub_header.gif); */
  27. 	height:30px;
  28. }
  29. .sub_footer{
  30.     width:100%;
  31. 	background-color:blue;
  32. 	/* background-image:url(/images/sub_header.gif); */
  33. 	height:30px; 
  34.     clear:both;
  35. }
  36. .sub_content{
  37. 	border-style:none solid none solid;
  38. 	border-width:1px;
  39. 	border-color:bebeff;
  40. 	background-color:green;
  41. 	padding:5px;
  42. 	height:auto;
  43. 	overflow:auto;
  44. }
  45. .book_details{
  46. 	width:35%;
  47.     float:left;
  48.     clear:left;
  49. 	background-color:gray;
  50. }
  51. .trace_details{
  52. 	width:65%;
  53. 	min-width:300;
  54. 	background-color:orange;
  55. 	float:right;
  56. }
  57.  
  58. </style>
  59. </HEAD>
  60. <BODY>
  61. <div class="content">
  62. 	<div class="content_header"><h2 class="header_text">content_header</h2></div>
  63. 	<div class="nav">nav
  64. 	       <!-- nav bar stuff -->
  65. 	</div>
  66.         <div class="internal_content">internal_content
  67. 	     <div class="sub_header rounded_top"><h2 class="sub_header_text">sub_header_text</h2></div>
  68. 		<div class="sub_content">sub_content
  69. 			<div class="book_details">book_details
  70. <div style="float:left"><img class="book_cover" src="" />book_cover</div>
  71. 				<div style="float:left" class="trace_details">class trace_details
  72. 					<table class="info">info
  73. 						<!-- table displaying book details -->
  74. 					</table>
  75. 				</div>
  76. 			</div>
  77.                         <div class="trace_details">id trace_details <!-- was an id instead of a class -->
  78. 				<table class="list">list
  79.                                     <!-- table shown more info -->
  80.                                 </table>
  81.                         </div>
  82.                 </div>
  83. 	<div class="sub_footer rounded_base">sub_footer rounded_base</div>
  84. </div>
  85. </body>
  86. </html>
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
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 google griefers hackers hitcounter hover html 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 swf swf. textcolor timecolor titletags url urlseparatedwords visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC