Hi,
I have the following CSS styles:
- #legend{
-
padding: 15px 0px 15px 0px;
-
font:Georgia, "Times New Roman", Times, serif;
-
font-size:1.8em;
-
font-weight:bold;
-
-
}
-
#list {
-
width:620px;
-
background-color:#fff;
-
display:table;
-
}
-
-
#list-title{
-
padding: 15px 0px 15px 0px;
-
font:Georgia, "Times New Roman", Times, serif;
-
font-size:1.6em;
-
font-weight:bold;
-
-
}
-
-
#list-item{
-
clear:both;
-
border-top: 1px dotted #CCCCCC;
-
height:auto;
-
}
-
-
#list-item-image{
-
float:left;
-
display:table-column;
-
width:207px;
-
height:100%;
-
}
-
-
#list-item-textbox{
-
float:left;
-
}
-
-
#list-item-title{
-
-
font:Georgia, "Times New Roman", Times, serif;
-
font-size:1.2em;
-
font-weight:bold;
-
padding:10px;
-
}
-
-
#list-item-subtitle{
-
font:Georgia, "Times New Roman", Times, serif;
-
font-size:1em;
-
padding:10px;
-
}
-
-
#list-item-description{
-
font:Georgia, "Times New Roman", Times, serif;
-
font-size:1em;
-
padding:10px;
-
line-height: 130%;
-
height: 12px;
-
}
And this list HTML code:
-
-
<body leftmargin="0px">
-
-
<div id= "list">
-
-
<div id = "list-title">This is the title of the list</div>
-
-
<div id = "list-item">
-
<div id = "list-item-image"></div>
-
<div id="list-item-textbox">
-
<div id = "list-item-title">This is the title of the list</div>
-
<div id = "list-item-subtitle">Subtitle</div>
-
<div id = "list-item-description">This is the description of the item.</div>
-
</div>
-
</div>
-
-
-
<div id = "list-item">
-
<div id = "list-item-image"></div>
-
<div id="list-item-textbox">
-
<div id = "list-item-title">This is the title of the list</div>
-
<div id = "list-item-subtitle">Subtitle</div>
-
<div id = "list-item-description">This is the description of the item.</div>
-
</div>
-
</div>
-
-
</div>
-
-
</body>
-
-
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
