Help me align this two elements thank you.

[co.ador]

check the Rate: text in the picture and the rating square that are not aligned. I don't know how to handle so they can look aligned.

 

Right now it looks like

 

 

 

I want it to look like.

 

 

 

<div id="shoeinfo">
<img src="../images/spacer.gif" width="95%" height="7" style="position:relative; left:7px;"/>
	<h2 class="infohead">" . $content['shoename'] . "</h2>
	<div class="video"><img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="100%" height="100%"></div>

	<h5> Rate:</h5>
<h4>";
$ratingData = Rating::OutputRating($content['shoename']);
      
      if (Error::HasErrors())
      {
        echo Error::ShowErrorMessages();
        Error::ClearErrors();
      }
      else
      {
        echo $ratingData;
      }  
  echo"</h4>
    	
       <h3>Prosedimiento:</h3>
    	<p>Womens fashion shoes with higher 
    	heels generally have pre-made, thin,
    	flexible, leather or resin rubber fitted
    	soles, made using the bottom pattern
    	created from the last. Two shapes of
    	sole are made this way, one for a Louis
    	heel, and the other for a Knock-on type. </p> 
</div>

 

 

[liamloveslearning]

you could try giving them each a style eg.

 

<span style="display:inline; float:left;">Rate:</span>

<span style="float:left;">Your ratings here</span>

 

 

[co.ador]

Thank you liam

 

 

solution:

 

h3{

clear:both;

}

h4{

float:left;

}

 

h5{

float:left;

display:inline;

}

 

Now when I rate the <h3>  h3 p and the p move down making the .shoeinfo snags now...

 

It pushes the elements to the right to take up the space of the shoeinfo class below the one being rated...

 

I have to rate one of the other shoeinfo div class in the same row to balance it and make the shoeinfo class that has moved to the right to come back to it's position again.

[liamloveslearning]

sorry I cant quite understand your problem, the h3 p is moving down? could you print screen your page and ill have a look 

[co.ador]

Hello

This is how it looks before rating:

 

 

 

After rating then it snags

 

 

 

after rating the third loop iteration it come back to an order again and all the iterations align...

 

 

 

 

[liamloveslearning]

ahh you need to put your clearer below the code, can you paste your entire code and css and ill have a look

[Dorky]

.rate { display: inline; float: left; }

<h4 class='rate'
<h5 class='rate'