...

View Full Version : How do I get these to line up ?



jeddi
02-03-2012, 02:31 PM
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>



.

tracknut
02-03-2012, 04:38 PM
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

fredrikrob
02-03-2012, 08:13 PM
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>

felgall
02-03-2012, 09:16 PM
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.

jeddi
02-04-2012, 07:50 PM
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.


.

tracknut
02-04-2012, 08:28 PM
Presumably you also dropped the float:left from the css you've shown here?

Dave

jeddi
02-05-2012, 05:37 AM
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:


.

SB65
02-05-2012, 09:24 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum