div和img float：IE7中的CSS对齐问题

Question

I have to show 4 news with images, date and title of publication in sort of two column - left column for image, right column for date and title.

Tried different approaches using dl and and now div with class dl to achieve the arrangement, worked only in FF and IE8 and 9.

IE7 doesnt apply alignment I wanted.

Arranged jsfiddle for testing - the issue shows when result window is wider than usual.

Would accept also suggestions for better HTML structure of showing news.

Answer 1

<div style="clear:both"></div>

Putting that between each item fixes it for IE7. Or take the clearfix from the html5 boilerplate http://html5boilerplate.com/

Alternatively you can wrap each dt/dd pair in a div

Answer 2

here is the working version Check the updated jsfiddle

Please find the changes in css and HTML structure below :-

CSS:

#section{
    width: 560px;
    float: left;
    font-size: 0.8em;
    position: relative;
}
.dl .dd h4{
    font-size: 0.9em;
 }
.dl h4 a{
    text-decoration: none;
    font-weight: normal;
}
.dl h4 a:hover{
    text-decoration: underline;
}
.dl .dt{
    float: left;
    width: 100px;
    height: 75px;
    font-size: 0.5em;
    margin: 0 0 5px 0;
}
.dl .dd{
    width: 480px;
    float: right;
}
.dl .wrapper { /* new element added */
    overflow: hidden;
    height: 100%;
    padding: 10px 0 5px;
}
.dl .dd p{
    font-size: 0.7em;
    font-style: italic;
}


/* No need of this code
.dl:after,
.dl .dt:after,
.dd:after,
.dl .dt img:after
{
    content:"";
    height: 0;
    clear: both;
    display: block;
}
*/

HTML:

<div class="dl">
  <div class="wrapper">
      <div class="dt"><img src="/news_pics/16.jpg" alt="pic 1" width="100px" height="75px"/> </div>
      <div class="dd"><p>12 06 2012</p><h4><a href="#">News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf</a></h4></div>
  </div>   
  <div class="wrapper">
      <div class="dt"><img src="/news_pics/16.jpg" alt="pic 2" width="100px" height="75px"/></div>
      <div class="dd"><p>21 05 2012</p><h4><a href="#">News 2 title</a></h4></div>
  </div>
  <div class="wrapper">
      <div class="dt"><img src="/news_pics/16.jpg" alt="pic 3" width="100px" height="75px"/></div>
      <div class="dd"><p>19 05 2012</p><h4><a href="#">News 3 title title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf</a></h4></div>
  </div>
  <div class="wrapper">    
      <div class="dt"><img src="/news_pics/16.jpg" alt="pic 4" width="100px" height="75px"/></div>
      <div class="dd"><p>8 05 2012</p><h4><a href="#">News 4 title</a></h4></div>
  </div>    

EDIT:

The <div class="wrapper" helps to clear the float and display the elements properly in all browsers including IE6 & 7.

Answer 3

:before and :after don't work in IE7

see :after and :before css pseudo elements hack for IE 7

Answer 4

For your quick reference i put the fiddle checkout this

The issue there is you put the section width 560px; and the content inside will exceed the limit so that issue occures. and the <p> tag with the highest width

Changes:

.dl .dd p{
   width: 210px; //changed
    font-size: 0.7em;
    font-style: italic;
}

for every dd,dt div surrond with a main div

    <div class="fix_float">
   <dt>
      date content
   </dt>
   <dd>
        text content
   </dd>
</div>

Answer 5

enter code here

try this html:

<ul class="ul">
    <li class="li">
        <img src="/news_pics/16.jpg" class="thumb" width="100" height="75">
        <div class="text">
            <p class="date">
                12 06 2012
            </p>
            <h4>
                <a href="" class="title">
                    News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf
                </a>
            </h4>
        </div>
    </li>
    <li class="li">
        <img src="/news_pics/16.jpg" class="thumb" width="100" height="75">
        <div class="text">
            <p class="date">
                12 06 2012
            </p>
            <h4>
                <a href="" class="title">
                    News 1 title khfk ds khf kdsfkdsh fkkds hfkhdsjkf kj kjs hdfkjdsk kds k hfkjhds k ks hdfkjhds fjk hdsk hfkjds kgjkl f dflgk dflkdf lk lf jdl glklk dllgdldl l dfljlgkjdflgkjdf
                </a>
            </h4>
        </div>
    </li>
</ul>

and css

.ul {
margin: 0;
padding: 0;
list-style: none;
}
.li {
overflow: hidden;
margin-bottom: 5px;
}
.thumb {
float: left;
width: 100px;
height: 75px;
}
.text {
margin-left: 120px;
}
.title {
font-size: 0.9em;
text-decoration: none;
font-weight: normal;
}
.title:hover {
text-decoration: underline;
}

in jsfiddle http://jsfiddle.net/sgMKy/