Strange issue with a border going to the above div? - html

Question

I want my bordered div to look like:
neat and just wrapped around the div right under the two img divs. (Adding a hyphen or period separates the div to separate and lets it go below).
but instead, I'm getting
where it looks like it's going up and hooking to the above divs — ideas?
This is my css:
tallcrop {
width: 49%;
height: 55vh;
overflow: hidden;
float: left;
align: left;
display: inline-block;}
tallcrop img{
position:center;
height: 100%;
object-fit: cover;}
.leftside {
margin-top: .5%;
padding-right: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
.rightside {
margin-top: .5%;
padding-left: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
fluid box {
width: 100%;}
fluidbox p {
border: .06em solid black;
height: ;
font-face:'ag';
line-height: 1em;
font-size: 3em;
padding: 1%;
}
and HTML:
<!--Fires-->
<tallcrop class="leftside">
<img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>
<!--Small Editions-->
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>
<!--Fluid-->
<fluidbox>
<p>On the Democratic <font face="ab">Fluidity</font> of Digital Artist Books</p></fluidbox>

Answer 1

You are using float for the left and right alignment. If you are using this property you must need to use clear: both CSS property.
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack as given below.
I have added this HTML tag below the tallcrop tag:
<div class="clearfix"></div>
Here is the CSS:
.clearfix {
clear: both;
}
Here is the demo:
tallcrop {
width: 49%;
height: 55vh;
overflow: hidden;
float: left;
align: left;
display: inline-block;}
tallcrop img{
position:center;
height: 100%;
object-fit: cover;}
.leftside {
margin-top: .5%;
padding-right: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
.rightside {
margin-top: .5%;
padding-left: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
fluid box {
width: 100%;}
fluidbox p {
border: .06em solid black;
font-face:'ag';
line-height: 1em;
font-size: 3em;
padding: 1%;
}
.clearfix {
clear: both;
}
<!--Fires-->
<tallcrop class="leftside">
<img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>
<!--Small Editions-->
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>
<!--Fluid-->
<div class="clearfix"></div>
<fluidbox>
<p>On the Democratic <font face="ab">Fluidity</font> of Digital Artist Books</p></fluidbox>
You can also edit it on Codepen.

Answer 2

It is because you haven't cleared your floats and also as you are using custom html elements, it doesn't know what type of element it is (ie inline, block, etc). You can fix your code with the following:
fluidbox { /* remove the space between fluid and box in your css */
width: 100%;
display:block; /* make it a block element */
clear:left; /* clear your left float */
}
Your fixed code:
tallcrop {
width: 49%;
height: 55vh;
overflow: hidden;
float: left;
display: inline-block;
}
tallcrop img {
position: center;
height: 100%;
object-fit: cover;
}
.leftside {
margin-top: .5%;
padding-right: 1%;
padding-bottom: 1.5%;
padding-top: 0%;
}
.rightside {
margin-top: .5%;
padding-left: 1%;
padding-bottom: 1.5%;
padding-top: 0%;
}
fluidbox {
width: 100%;
display:block;
clear:left;
}
fluidbox p {
border: .06em solid black;
line-height: 1em;
font-size: 3em;
padding: 1%;
}
.clearfix {
clear: both;
}
<!--Fires-->
<tallcrop class="leftside">
<img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>
<!--Small Editions-->
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>
<!--Fluid-->
<fluidbox>
<p>On the Democratic
<font face="ab">Fluidity</font> of Digital Artist Books</p>
</fluidbox>