Many DIVs and CSS...... problem

1

Ok, recently been trying to convert a site over so that it’s compliant with the W3C standards.

I’ve been told to ditch tables and go with DIV tags instead.

Fine.

Having problems though.

Attached are two images.

good.jpg - pretty much what I want, except with 20px by 20px icons where the text ‘icon’ is.

****.jpg - what i’m getting. Some icons are pushed around… no idea what’s going on.

I’ve only just started using DIV tags frequently. I’m a tables guy. Trying to convert myself to DIVism.

Here is the code. Can someone please tell me what I’m doing wrong, because I don’t know. :wt:


<div id="links">
         <div id="40pxheight">
             <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
          <div id="linkstext">
            text
          </div>
        </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
      <div id="40pxheight">
             <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>
        <div id="40pxheight">
            <div id="linksicon"><img src="../images/buttonWebDesignMini2.png" alt="Website Design"/></div>
            <div id="linkstext">
            text
            </div>
      </div>



#links {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #9ea8af;
}
#40pxheight {
    height: 40px;
}
#linksicon {
    width:35px;
    float:left;
    text-align: right;
    padding:5px;
}
#linkstext {
    width:155px;
    float:right;
    text-align:left;
    padding:5px;
}

Help is much appreciated. :slight_smile: