Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2013-12-08
3
Medium Priority
?
633 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 620 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

577 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