Ensuring a <p> sits underneath a div

Question

I am having great difficulty in placing a line of text directly underneath a div. Just so you under stand or can picture my code, the div contains an image pulled from my database and the users first and last name is also pulled but sits under the image. I hope this explains the following:

 <div id="latest">
    <?php 
        $query = 'SELECT f.*, m.firstname AS firstname, m.lastname AS lastname FROM folio AS f, members AS m WHERE f.userid = m.id ORDER BY dateadded DESC';
        $result = mysqli_query($connection, $query);
        if(!$result){
            die('Database error: '.mysqli_error($connection));
        }
        while($row = mysqli_fetch_assoc($result)){
            ?>
    <a href="#inline1" style="text-decoration:none;" class="fancybox" >
    <div class="outimgbox"> <a style="text-decoration: none;" class="fancybox fancybox.ajax" rel="gallery<?php echo $row['userid']; ?>" data-fancybox-type="ajax" href="profile_image_fancybox.php?imgid=<?php echo $row['imgid']; ?>">
      <div id="mainwrapper">
        <div id="box-3" class="box"> <img class="uploads"  src="uploads/folio/<?php echo $row['filename']; ?>" /> <span class="caption fade-caption">
          <h3><?php echo $row['title']; ?></h3>
          <p style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;"><?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?></p>
          </span> </div>
      </div>
      </a> </div>
        <p>
            <?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?>
        </p>
    <?
        }
        ?>
  </div>
</div>

As requested here is the css:

    img.uploads{padding: 0;
        margin-left: -25%;
        max-height:100%;
        }


    img.uploads:hover{
        opacity: .4;
        -webkit-transition: opacity;
        -webkit-transition-timing-function: ease-out;
        -webkit-transition-duration: 1000ms;
    }

    #mainwrapper {
}

/* Image Box Style */
#mainwrapper .box {
    width: 200px;
    height: 200px;
    border:10px solid #fff;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    -moz-box-shadow: 0 0 5px #d9d9d9;
    -webkit-box-shadow: 0 0 5px #d9d9d9;
    box-shadow: 0 0 5px #d9d9d9;
    float: left;
    position: relative;
    overflow: hidden;
        cursor:pointer;

}
#mainwrapper .box img {
    position: absolute;
    left: 0;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;

}

/* Caption Common Style */
#mainwrapper .box .caption {
    background-color: rgba(255,255,255,0.95);
    position: absolute;
    color: #2d2d2d;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;
    left: 0;
}


/** Caption 3: Fade **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {
    opacity: 0;
    width: 231px;
    height: 231px;
    text-align: justify;
    padding: 15px;
}


#mainwrapper .box .scale-caption h3 {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    -ms-transition-delay: 300ms;    
    transition-delay: 300ms;
}

#mainwrapper .box .scale-caption p {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    -ms-transition-delay: 500ms;    
    transition-delay: 500ms;
}


/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
    opacity: 1;
}


#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}

Answer 1

There's a lot wrong with your code.
First, you have a h3 between the image and p.
Second, you make a span the container for p.
What you are trying to achieve isn't possible under that setting and validation of your code will not be possible either.
Try something like this instead:

 
  <div id="box-3" class="box"> 
   <h3><?php echo $row['title']; ?></h3>
   <p>
    <img class="uploads"  src="uploads/folio/" />
   </p>
   <p id="whatever" style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;">
   <?php echo 'by' ." ". $row['firstname'] ." ". $row['lastname'];  ?>
  </p>
 </div>
 

Then, simply style it like this:

 
   .box-3 p{margin: 0; padding: 0;}
   #whatever{display: none;} /* this will hide the names by default */
   .box-3:hover #whatever{display: block;} /* this should resolve your issue */
 

This will remove all the empty spaces between the two p and the text will be right under the image (as long as the image doesn't have any padding or margin either).

Hope the explanation is clear and the answer helps.

Answer 2

Since you are using 'float' on the '#mainwrapper .box', you need to have 'clear: left' if you want elements to appear underneath instead of on the side.

Example:

Html:

<div class="float">
    ...
</div>

<p class="clear">
    ...
</p>

Css:

.float { width: 30%; float: left; }

.clear { clear: left; }

Answer 3

I think Whistletoe means something like this. Replace the span with a div, since you don't want it on the same line, right?

<div id="mainwrapper">
    <div id="box-3" class="box">
        <img class="uploads"  src="uploads/folio/<?php echo $row['filename']; ?>" />
        <div class="caption fade-caption">
            <h3><?php echo $row['title']; ?></h3>
            <p style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;"><?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?></p>
        </div>
    </div>
</div>

Answer 4

It's the span-element following the image that messes things up. You need to wrap the image and the following text in block-level elements. You can use div (or figure and figcaption if you're into html5).