473,224 Members | 1,332 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 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 2961

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

Similar topics

3
by: Peter Jenkins | last post by:
I have some divs I am using to get a two column layout for a section of a page, like so; <div1> <div2> <div3> blah blah blah blah blah blah blah blah...
1
by: Mitch | last post by:
I have 2 rectangle images. 1 with a box in the upper left corner and the other with a box in the lower right hand corner. Both images are the same size. I would like to display these 2 images so...
8
by: gpbmike | last post by:
I'm wondering if anyone else has had this problem before. Every now and then a div on my page will overlap with another. Thi only happens in firefox (vs. IE and Safari) and it corrects itself whe...
2
by: Daphne Tregear | last post by:
Is there every anything other than woe with IE...? I'm working on a redesign for my hobby pages in my personal home space before re-exporting them back to where they belong. I've based the...
3
by: michelle koen | last post by:
Hi Folks, on <a href="http://donbrice.com/new/page.php?section=schools">this page</a> and for all the sections I can't get Safari(2.02) or Firefox-PC(1.5) or the latest vers. of Opera-Mac to...
2
by: Jakub Ɓukomski | last post by:
hi. i've got a problem as follows, to which i can't find a solution to: i've got two divs, which are completely independent of each other (neither is a parent of child of another). they're...
1
by: spolsky | last post by:
hi, i have the following html. if padding given for the span it overlaps the divs within IE 6, FireFox 1.5 and Opera 9.01. i don't want to give sizes manually. how could i prevent this...
4
by: gzaxar | last post by:
Hi to all in forum. It is my first post here. I am quite new in MsAccess programming. Here is a problem which i am facing to. I want to keep records of employees CV's. More specifically i want...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.