Have an issue with CSS positioning

Question

I have a list of items displayed one below the other. I have been trying to make the images next to the text display parallel to the text but it seems like the images almost hover over the text. The image shows what is being displayed:

original display

<html>
<head>
      <title>Page</title>
      <style>
        body 
        {
        padding:0px; 
        margin:0px;
        }

        .content 
        {
        max-width:947px; 
        width:100%;
        margin:0px auto;
        font-family: Tahoma, Geneva, sans-serif; 
        text-decoration:none; 
        font-size:15px;         
        float:left;         
        }

        .full_row 
        {
        float:left; 
        clear:left; 
        line-height: 2.5em; 
        padding:0px; 
        margin-bottom:5px; 
        width:100%; 
        max-width:947px;    
        }

       .first_half_of_row 
       {
        float:left; 
        margin-left:0px; 
        margin-top:0px; 
        margin-bottom:0px; 
        margin-right:15px; 
        padding:0px; 
        width:100%; 
        max-width:240px;
        text-align:right;
            border:1px solid white;   
       }        

       .field_properties 
       {
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-size: 20px;
        color: #181818;
        font-weight: normal;
        float: right;           
       }

      </style>
</head>
<body>      
  <div class="content">   
        <div class="full_row">
            <div class="first_half_of_row">
                <span style="float:right;">
                    <img style="float:left; margin-right:3px;" src="correct.png" />                     
                    <span class="field_properties">User ID</span>                       
                </span>
            </div>              
        </div><br />

        <div class="full_row">
            <div class="first_half_of_row">
                <span style="float:right;">
                    <img style="float:left; margin-right:3px;" src="error.png" />                       
                    <span class="field_properties">Password</span>                      
                </span>
            </div>              
        </div><br />

        <div class="full_row">
            <div class="first_half_of_row">
                <span style="float:right;">
                    <img style="float:left; margin-right:3px; " src="error.png" />                      
                    <span class="field_properties">Confirm Password</span>                      
                </span>
            </div>              
        </div><br />

  </div>
</body>

</html>

I want the check mark and 'X' images to displayed right next to the text rather than slightly above the text. This is how I want the images to be displayed:

this is how list should look like

Remove the floats. They have no use there since the image is allready structured left from the text. — TVBZ, Mar 24 '19 at 09:04

score 0 · Accepted Answer · answered Mar 24 '19 at 09:02

Remove all the floats from your style

See example

        body 
        {
        padding:0px; 
        margin:0px;
        }

        .content 
        {
        max-width:947px; 
        width:100%;
        margin:0px auto;
        font-family: Tahoma, Geneva, sans-serif; 
        text-decoration:none; 
        font-size:15px;                 
        }

        .full_row 
        {
        line-height: 2.5em; 
        padding:0px; 
        margin-bottom:5px; 
        width:100%; 
        max-width:947px;    
        }

       .first_half_of_row 
       {
        margin-left:0px; 
        margin-top:0px; 
        margin-bottom:0px; 
        margin-right:15px; 
        padding:0px; 
        width:100%; 
        max-width:240px;
        text-align:right;
            border:1px solid white;   
       }        

       .field_properties 
       {
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-size: 20px;
        color: #181818;
        font-weight: normal;          
       }

<div class="content">   
        <div class="full_row">
            <div class="first_half_of_row">
                <span>
                    <img style="margin-right:3px;" src="correct.png" />                     
                    <span class="field_properties">User ID</span>                       
                </span>
            </div>              
        </div><br />

        <div class="full_row">
            <div class="first_half_of_row">
                <span>
                    <img style="margin-right:3px;" src="error.png" />                       
                    <span class="field_properties">Password</span>                      
                </span>
            </div>              
        </div><br />

        <div class="full_row">
            <div class="first_half_of_row">
                <span>
                    <img style="margin-right:3px; " src="error.png" />                      
                    <span class="field_properties">Confirm Password</span>                      
                </span>
            </div>              
        </div><br />

  </div>

Have an issue with CSS positioning

1 Answers1