CSS - how to fix text appearing below containing div box? - html

Question

my 'about me' and echoed 'about text' appear below the containing div(class="u-about"), for both of them, i have no idea why its doing this, and id rather not use relative positioning to move it up, as it seems messy, and it shouldn't be doing this in the first place. any idea's on how to fix this would be much appreciated!
my css code:
.profile-about { /* contains profile card and about card */
float: left;
}
.u-about {
position: relative;
top: 100px;
display: block;
width: 400px;
height: 220px;
background-color: white;
border-radius: 10px;
text-align: center;
margin: 0px;
}
.ubout {
margin: 0px;
}
my html code:
<section>
<div>
<div class="profile-about">
<div class="u-profile-card">
<h3>Guide:</h3>
<div>
<h2><?php echo ucfirst($first);?> <?php echo $last; ?></h2>
</div>
<div class="img-txt">
<div class="image-cropper">
<img class="u-image" src="uploads/<?php echo $image; ?>" alt="no
image found">
</div>
<div class="u-info">
<h2><?php echo ucfirst($u_city); ?>, <?php echo ucfirst($u_region); ?
>, <?php echo ucfirst($u_country); ?></h2>
<h2><?php echo ucfirst($u_rating); ?> Stars</h2>
<h2 class="u-email"><?php echo ucfirst($email); ?></h2>
</div>
</div>
</div>
<div class="u-about">
<div>
<h1>About me</h1>
<p class="ubout"><?php echo ucfirst($about); ?></p>
</div>
</div>
</div>

Answer 1

By the containing div, I assume you mean their direct parent <div class="u-about">. The elements do not actually appear below that... though they may well appear to, due to the fact that you have top: 100px on this element. Simply removing this will bring the entire .u-about element up the page, including both texts:
.profile-about {
/* contains profile card and about card */
float: left;
}
.u-about {
position: relative;
/*top: 100px;*/
display: block;
width: 400px;
height: 220px;
background-color: white;
border-radius: 10px;
text-align: center;
margin: 0px;
}
.ubout {
margin: 0px;
position: relative;
bottom: 200px;
}
<section>
<div>
<div class="profile-about">
<div class="u-profile-card">
<h3>Guide:</h3>
<div>
<h2>
<?php echo ucfirst($first);?>
<?php echo $last; ?>
</h2>
</div>
<div class="img-txt">
<div class="image-cropper">
<img class="u-image" src="uploads/<?php echo $image; ?>" alt="no
image found">
</div>
<div class="u-info">
<h2>
<?php echo ucfirst($u_city); ?>,
<?php echo ucfirst($u_region); ?
>, <?php echo ucfirst($u_country); ?>
</h2>
<h2>
<?php echo ucfirst($u_rating); ?> Stars</h2>
<h2 class="u-email">
<?php echo ucfirst($email); ?>
</h2>
</div>
</div>
</div>
<div class="u-about">
<div>
<h1>About me</h1>
<p class="ubout">
<?php echo ucfirst($about); ?>
</p>
</div>
</div>
</div>
</div>
</section>

Answer 2

Try this:-
.profile-about { /* contains profile card and about card */
float: left;
}
.u-about {
position: relative;
display: block;
top:100px;
width: 400px;
height: 220px;
background-color: white;
border-radius: 10px;
text-align: center;
margin: 0px;
}
.ubout {
margin: 0px;
position: relative;
bottom: 200px;
}
.child{
position: absolute;
height: 320pxpx;
margin: -100px 0 0 0px;
}
<section>
<div>
<div class="profile-about">
<div class="u-profile-card">
<h3>Guide:</h3>
<div>
<h2><?php echo ucfirst($first);?> <?php echo $last; ?></h2>
</div>
<div class="img-txt">
<div class="image-cropper">
<img class="u-image" src="uploads/<?php echo $image; ?>" alt="no
image found">
</div>
<div class="u-info">
<h2><?php echo ucfirst($u_city); ?>, <?php echo ucfirst($u_region); ?
>, <?php echo ucfirst($u_country); ?></h2>
<h2><?php echo ucfirst($u_rating); ?> Stars</h2>
<h2 class="u-email"><?php echo ucfirst($email); ?></h2>
</div>
</div>
</div>
<div class="u-about" style="background-color:red;">
<div class="child">
<h1>About me</h1>
<p class="ubout"><?php echo ucfirst($about); ?></p>
</div>
</div>
</div>