Solved

text and select horizontaly aligned

Posted on 2010-09-07
8
164 Views
Last Modified: 2012-05-10
want the text before the select area to begin at the same place
want the select box to begin at the same place

text1          select1
text200      select200
text20001   select20001
<style>
.selectstyle1{
  margin-left:0px;
  font-size:10pt;
  width:200px;
}
.divstyle1{
  margin-left: -10px;
  margin-bottom: 25px;
  font-size: 10pt;
}
</style>

<div class="divstyle1">Condition of Product:
<select class="selectstyle1">
</select>
</div>

<div class="divstyle1">Condition of Product2:
<select class="selectstyle1">
</select>
</div>

<div class="divstyle1">Condition of Product3:
<select class="selectstyle1">
</select>
</div>

Open in new window

0
Comment
Question by:rgb192
8 Comments
 
LVL 13

Expert Comment

by:George K.
ID: 33620496
use the following accordingly


<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

0
 
LVL 7

Expert Comment

by:inxil
ID: 33620518
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33623881
<style>
   .span1{
     width:50px;
     max-width:50px !important;
     min-width:50px !important;
   }
   .span1{
     width:60px;
     max-width:60px !important;
     min-width:60px !important;
   }
</style>

<ul>
  <li>
     <span class="span1">Row1text1</span>
     <span class="span2">Row1text2</span>
  </li>
  <li>
     <span class="span1">Row11text1</span>
     <span class="span2">Row11text2</span>
  </li>
  <li>
     <span class="span1">Row111text1</span>
     <span class="span2">Row111text2</span>
  </li>
</ul>
0
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!

 

Author Comment

by:rgb192
ID: 33628484
I edited answer from gurvinder372


and got
Row1text1 select1text2
Row11text1 select11text2
Row111text1 select111text2
<style>
   .span1{
     width:50px;
     max-width:50px !important; 
     min-width:50px !important; 
   }
   .span2{
     width:60px;
     max-width:60px !important; 
     min-width:60px !important; 
   }
</style>

<ul>
  <li>
     <span class="span1">Row1text1</span>
     <span class="span2">select1text2</span>
  </li>
  <li>
     <span class="span1">Row11text1</span>
     <span class="span2">select11text2</span>
  </li>
  <li>
     <span class="span1">Row111text1</span>
     <span class="span2">select111text2</span>
  </li>
</ul>

Open in new window

0
 

Author Comment

by:rgb192
ID: 33628501


I cant use tables
I must use div
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33628609
did that worked for you?
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 33628648
this worked for me in ff
<style>
   .div1{
     width:150px;
	 float:left;
   }
   .div2{
     width:160px;
	 float:left;
   }
</style>

<ul>
  <li>
     <div class="div1">Row1text1</div>
     <div class="div2">select1text2</div>
  </li>
  <li>
     <div class="div1">Row11text1</div>
     <div class="div2">select11text2</div>
  </li>
  <li>
     <div class="div1">Row111text1</div>
     <div class="div2">select111text2</div>
  </li>
</ul>

Open in new window

0
 

Author Closing Comment

by:rgb192
ID: 33629256
thanks
0

Featured Post

Independent Software Vendors: 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

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 66
CSS in HTML 5 53
CSS question 4 25
Can anyone help me find this preloader? 51 43
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

733 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