How do I get these to line up ?

Hi,

Please help if you can.

How can I get the black constants to line up with the redish titles:

http://www.sd5.info/express01.jpg



i.e.
Client_id: dav195
Client email: dave.feye@email.com

( deliberate typo in email )

This is my code:


<div class="art_title">
<span>Account Name:&nbsp;</span> <input class="data1" style="margin-top:12px;" type="text" name='x_sc_name' size="66" maxlength ="60" value = '<?php echo $N_sc_name ?>' >
</div>

<div class="art_title">
<span>Access Code:&nbsp;</span> <input class="data1" style="margin-top:12px;" type="text" name='x_access' size="66" maxlength ="60" value = '<?php echo $N_access ?>' >
</div>
<div class="art_title">
<span>Client id:&nbsp;</span><span style="color:black; float:left;"><?php echo $this_user ?></span>
</div>

<div class="art_title">
<span>Client email:&nbsp;</span> <span style="color:black;"><?php echo $N_email ?></span>
</div>



.

Hard to know without all the surrounding CSS. You certainly don't want that "float:left" in there, and you might put a border around the div "art_title" for testing, I'm guessing that it may be forcing the email address onto the next line because it can't fit inside the box next to "Client email".

Dave

Why don't you wrap your both span with P tag: <p><span>Client id:&nbsp;</span><span style="color:black; float:left;"><?php echo $this_user ?></span></p>

Why not use a <dl> list and make the left column the <dt> tag and the right column the <dd> tag and style them so they go where you want.

Hi,

I tried the suggestion for <p></p>
and also for

I put in a border and the .art_title is wide enough.

Dropped the "float:left;" from in line css

But no improvement.

http://www.sd5.info/express02.jpg

The ccs:


.art_title{
width: 100%;
border:1px solid #000;
padding: 10px 0 0 10px;
margin: 0 0 0 0px;
text-align: left;
float:left;
}

.art_title label{
margin: 0 0 10px 0;
width:150px;
vertical-align:top;
text-align:left;
float:left;
}

.art_title span{
margin: 0 0 10px 0px;
float:left;
clear:left;
}

.data1 {
float:left;
border:1px solid #000;
}


Still can not see why there is a live break.

Any ideas ?

Thanks.


.

Presumably you also dropped the float:left from the css you've shown here?

Dave

Now that my friend is a GOOD question :D

I did not remove it because it would have messed up the first span
and others that use the same class.

So I inserted this:

<span style="color:black; float:none;">

Which cancels the "float:left;" in class ....

.... It lines up nicely :D:D:D

Thanks for the question :thumbsup:


.

They're not aligned because of this:

.art_title span {
clear: left;
float: left;
margin: 0 0 10px 0;
}

Take that out and give it another try.