The text in the float on the right is displayed on the left
I am having trouble displaying the following code. I am interested in splitting <div class="contectCode">
into two <div class="left">
and <div class="right">
. So some of the toggle cases should appear on the left and some on the right.
<?php
$xml = simplexml_load_file("Profiles.xml");
foreach($xml->children() as $Developer){
echo '<div class="contectCode" style="height: 260px;">';
echo '<div class="left" style="width:365px;">';
echo '<b>' . $Developer['name'] . '</b>';
echo '</div><br/>';
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
echo '<p><b><i>Communications with you</i></b></p>';
echo '</div>';
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
echo '<p><b><i>Communications with other developers </i></b></p>';
echo '</div>';
foreach($Developer->children() as $factor){
switch ($factor->getName()){
case "trust":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>You have selected (trusted) him to help you ' . $factor . ' times</p><br/>';
else
echo '<p>You have selected (trusted) her to help you ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "response":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He hes responded to your help request ' . $factor . ' times</p><br/>';
else
echo '<p>She has responded to your help request ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "indegreeOutdegree":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has helped you to complete your code ' . $factor . ' times</p><br/>';
else
echo '<p>She has helped you to complete your code ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "recommended":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has been recommended to you by others ' . $factor . ' times</p><br/>';
else
echo '<p>She has been recommended to you by others ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "trustG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has been selected (trusted) by others ' . $factor . ' times</p><br/>';
else
echo '<p>She has been selected (trusted) by others ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "responseG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has responded to others requests ' . $factor . ' times</p><br/>';
else
echo '<p>She has responded to others requests ' . $factor . ' times </p><br/>';
echo '</div>';
break;
case "indegreeOutdegreeG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has helped other developers ' . $factor . ' times</p><br/>';
else
echo '<p>She has helped other developers ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "recommendedG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has been recommended to help by others ' . $factor . ' times</p><br/>';
else
echo '<p>She has been recommended to help by others ' . $factor . ' times</p><br/>';
echo '</div>';
break;
}
}
echo '</div>';
}
?>
If the output shows cases from left and right divs, it works well. However, if the output shows cases in the right div, it shifts them to the left. I want to display them on the right, not the right.
So how can I do this?
CSS
.contectCode
{
font-size:15px;
line-height:24px;
margin-left:13px;
margin-right:13px;
border-style:solid;
border-width:2px;
border-color:#000066;
padding:10px;
margin-top:5px;
margin-bottom:10px;
}
.left
{
float:left;
width:60%;
}
.right
{
float:left;
}
source to share
Ghadeer - I might be missing something in your post, but I took both of your HTML samples and your CSS and threw them into a quick page with an attached render (in Chrome v24 with colors to display layouts). In both of your HTML samples, the text in the right div is aligned to the left side of the div, due text-align:left
to your inline styles.
If you want to align your text correctly, consider adding text-align:right
CSS to your selector .right
and remove your inline style from the element <div class="right">...</div>
.
It's much easier to maintain this path, anyway!
On the side of the note, given that you are generating this HTML file like this, why are there any inline styles in the first place? It looks like these styles will be placed more correctly in your stylesheet.
source to share