Solved

Simple Question on div

Posted on 2011-09-26
5
170 Views
Last Modified: 2012-05-12
I have a form which displays class information. So the form should look something like this :-

Name                        Information
not found                   not found

But when i use the above  code it outputs them very close to each other like this :-

Name      Information
not found not found

If the name of the person is long and the information is long then everything works fine but when the name is short and the information is short then the form looks like this :-

Name                  Information
Testiing               this is not
123                      nice and i

Can anyone tell me what do i need to do to fix it ?. I just want to look like this :-

Name                                   Information
Testing 12345                      This is great and i am ready to do something very special
                                              someday. testing....
<table>
		<tr>
			<td ><b>Name</b><br />
				<div align="left" style="width: 100%;">
					not found
				</div>
			</td>
			<td><b>Information</b><br />
				<div align="right" style="width: 100%;">
					not found
				</div>
			</td>
		</tr>
	</table>

Open in new window

0
Comment
Question by:Micheal_Male
5 Comments
 
LVL 16

Expert Comment

by:Easwaran Paramasivam
ID: 36707622
Keep Title and Information in Different TD and remove div tag. See below example.

<tr>
<td width="100%">
   <b>Name</b>
</td>
<td style="align:left" width = "100%">
   Not Found
</td>
</tr>

0
 

Author Comment

by:Micheal_Male
ID: 36707666
I don't think that is correct. My title is on left side and the Not found is all the way on the right.
0
 
LVL 16

Accepted Solution

by:
Easwaran Paramasivam earned 42 total points
ID: 36707801
Use attached code like.
<html><body>
<table>
<tr>
<td width="50%">
   <b>Name</b>
</td>
<td width = "50%">
  <b>Information required</b>
</td>
</tr>
<tr>
<td style="align:left" width="50%">
    Not Found
</td>
<td style="align:left" width = "50%">
   Not Found
</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 41 total points
ID: 36707869
If you don't want to change your html then try this
<table width="100%">
    <tr>
      <td width="50%"><b>Name</b><br />
        <div align="left" style="width: 100%;">
          not found
        </div>
      </td>
      <td><b>Information</b><br />
        <div align="left" style="width: 100%;">
          not found
        </div>
      </td>
    </tr>
  </table>

Open in new window

0
 
LVL 5

Assisted Solution

by:eridanix
eridanix earned 42 total points
ID: 36707938
<table>
      <tr>
            <td width="200px"><b>Name</b><br />
                  <div style="float:left;">
                        not found
                  </div>
            </td>
            <td width="200px"><b>Information</b><br />
                  <div style="float:left;">
                        not found
                  </div>
            </td>
      </tr>
</table>

or if table have to be over whole page:

<table width="100%">
      <tr>
            <td width="50%"><b>Name</b><br />
                  <div style="float:left;">
                        not found
                  </div>
            </td>
            <td width="50%"><b>Information</b><br />
                  <div style="float:left;">
                        not found
                  </div>
            </td>
      </tr>
</table>
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

810 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