Solved

How do I align picture on left and right next to it text in html using div

Posted on 2013-12-08
3
587 Views
Last Modified: 2013-12-10
I want to acheive like this in html using div or any good format. I cannot use css because it is a knockou js script file.

Image    Text1
              Text2
              Text3

The text will be exactly on the right of the image but not below the image. I tried this code but it is putting my text below the image

MY CODE

<table>

            <tbody data-bind='foreach: $root.materials.Rows'>
            
                  
                  
                  <div style="float:left;width:158px;text-align:left;">
                  <img width="56px" height="56px" data-bind="attr : {src: Picture().Url}" /></div>
            <div style="float:right;width:158px;text-align:right;">
                        
                        <p>      <a data-bind="attr: { href:'/material/Lists/pictures/DispForm.aspx?ID=' + ID()}, text:Title"></a></p>
            </div>
<div style="float:left;width:180px;text-align:left; ">
                              <span data-bind='text: Specialities_Title'></span>
      </div>
                        
                  <div style="float:left;width:180px;text-align:left; ">
                        
                              <span data-bind='text: Degree'></span>
                        </div>                        
                        <div style="float:left;width:180px;text-align:left; ">
                              <span data-bind='text: Street'></span>
                        </div>                        
                        <div style="float:left;width:180px;text-align:left; ">
                              <span data-bind='text: City'></span>&nbsp<span data-bind='text: State'>&nbsp</span><span data-bind='text: Zip'></span>
                        </div>                  
                  <div style="float:left;width:180px;text-align:left;">
                              <span data-bind='text: Phone'></span>
                                
                  </div>
                  
            </tbody>
      
      </table>
0
Comment
Question by:bujjigadu
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
duttcom earned 310 total points
ID: 39705412
You probably don't need the table and you have way too many divs there. Try something like this where there are only two divs - one with float:left to hold the image and the other one without float (and a fixed size) which will just sit next to the first div. You can add paragraph tags or other formatting to the spans within the second div -

<div style="float:left;width:158px;text-align:left;">
<img width="56px" height="56px" data-bind="attr : {src: Picture().Url}" />
</div>
<div style="width:158px;">

<a data-bind="attr: { href:'/material/Lists/pictures/DispForm.aspx?ID=' + ID()}, text:Title"></a>

<span data-bind='text: Specialities_Title'></span>

<span data-bind='text: Degree'></span>

<span data-bind='text: Street'></span>

<span data-bind='text: City'></span>&nbsp<span data-bind='text: State'>&nbsp</span><span data-bind='text: Zip'></span>
                       
 <span data-bind='text: Phone'></span>
                               
                  </div>
0
 

Author Comment

by:bujjigadu
ID: 39706261
It doesn't work. Still put the text under picture
0
 

Author Closing Comment

by:bujjigadu
ID: 39710088
not exact answer
0

Featured Post

Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question