471,596 Members | 803 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,596 software developers and data experts.

How to use CSS to avoid overlapping of divs

1
Hi,

I have the following CSS styles:

Expand|Select|Wrap|Line Numbers
  1. #legend{
  2.     padding: 15px 0px 15px 0px;
  3.     font:Georgia, "Times New Roman", Times, serif;
  4.     font-size:1.8em;
  5.     font-weight:bold;
  6.  
  7. }
  8. #list {
  9.     width:620px;
  10.     background-color:#fff;
  11.     display:table;
  12. }
  13.  
  14. #list-title{
  15.     padding: 15px 0px 15px 0px;
  16.     font:Georgia, "Times New Roman", Times, serif;
  17.     font-size:1.6em;
  18.     font-weight:bold;
  19.  
  20. }
  21.  
  22. #list-item{
  23.     clear:both;
  24.     border-top: 1px dotted #CCCCCC;
  25.     height:auto;
  26. }
  27.  
  28. #list-item-image{
  29.     float:left;
  30.     display:table-column;
  31.     width:207px;
  32.     height:100%;
  33. }
  34.  
  35. #list-item-textbox{
  36.     float:left;
  37. }
  38.  
  39. #list-item-title{
  40.  
  41.     font:Georgia, "Times New Roman", Times, serif;
  42.     font-size:1.2em;
  43.     font-weight:bold;
  44.     padding:10px;
  45. }
  46.  
  47. #list-item-subtitle{
  48.     font:Georgia, "Times New Roman", Times, serif;
  49.     font-size:1em;
  50.     padding:10px;
  51. }
  52.  
  53. #list-item-description{
  54.     font:Georgia, "Times New Roman", Times, serif;
  55.     font-size:1em;
  56.     padding:10px;
  57.     line-height: 130%;
  58.     height: 12px;
  59. }
And this list HTML code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <body leftmargin="0px">
  3.  
  4. <div id= "list">
  5.  
  6.   <div id = "list-title">This is the title of the list</div>
  7.  
  8.   <div id = "list-item">
  9.       <div id = "list-item-image"></div>
  10.       <div id="list-item-textbox">
  11.           <div id = "list-item-title">This is the title of the list</div>
  12.           <div id = "list-item-subtitle">Subtitle</div>
  13.           <div id = "list-item-description">This is the description of the item.</div>
  14.        </div>
  15.   </div>
  16.  
  17.  
  18.   <div id = "list-item">
  19.       <div id = "list-item-image"></div>
  20.       <div id="list-item-textbox">
  21.           <div id = "list-item-title">This is the title of the list</div>
  22.           <div id = "list-item-subtitle">Subtitle</div>
  23.           <div id = "list-item-description">This is the description of the item.</div>
  24.        </div>
  25.   </div>
  26.  
  27. </div>
  28.  
  29. </body>
  30.  
  31.  
This looks fine, however when I add more content to the "description" div, two problems arise:

First, the title, subtitle, and description divs jump under the image div (they should remain to its right), and Second, one list-item starts to overlap the other. What is the best way to go about solving these two problems?

Any help will be greatly appreciated,

Daniel
Aug 27 '09 #1
0 2907

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Peter Jenkins | last post: by
1 post views Thread by Mitch | last post: by
8 posts views Thread by gpbmike | last post: by
2 posts views Thread by Daphne Tregear | last post: by
3 posts views Thread by michelle koen | last post: by
2 posts views Thread by Jakub Ɓukomski | last post: by
1 post views Thread by spolsky | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.