Tutorial :Align DIV tag without float:left



Question:

I have a problem with alignment of image and content in a list. Here is what my code is:

 <li>      <div class="small-view-image">         <img src="../images/xyz.png" height="41" width="34" alt="Test" title="Test"/>     </div>     <div class="small-view-content">       <a href='../xyz.html'>XYZ</a>     </div>                           </li>  

The problem is I cannot use float left to align the image on left and the content on right. alt text http://img831.imageshack.us/img831/271/layoutd.png

This is the output I am expecting. I cannot use the float:left because, the page is multilingual. Any suggestions or ideas welcome.


Solution:1

Expanding on dylanfm's answer with a tweak, your CSS would be:

li {      position: relative;      min-height: 50px;  }    .small-view-image {      position: absolute;      left: 0;      top: 0;  }    .small-view-content {      position: relative;      left: 40px; /* Makes room for the image */  }  

This will make sure that you <li> properly pushes down other page elements if the text is taller than the image.


Solution:2

You could set the li to have position: relative and position the image and text absolutely within it.


Solution:3

<li>    <div>img src="../images/xyz.png" height="41" width="34" alt="Test" title="Test"/></div>     <a href='../xyz.html'>XYZ</a>  

Note you can still apply specific style to the two elements above:

li > div {display:inline-block; width:?px}  li > a { ... }  

Edited as per comments.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »