Reputation: 83

CSS Alignment issue with div and img float:left in IE7

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.

Upvotes: 2

Answers (5)

yarm

Reputation: 698

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/

Upvotes: 1

Krish

Reputation: 2670

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>

Upvotes: 1

Subhajit

Reputation: 1987

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.

Upvotes: 2