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
EmoticonEmoticon