How to float div to right without mixing with the next content? - html

Question

I do not know how to formulate my question but I will explain it easily. My div content is mixing within the next div content when using float: right and I do not know why.
I am trying to achieve something like this using html and css:
I am trying to put that span text to right, using float: right this happens:
I see it is mixing within the next div when It should be outside.
Maybe I do not know what I doing. But this is my code:
#foot {
background-image: url(https://images.pexels.com/photos/3184433/pexels-photo-3184433.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
background-size: cover;
}
#foot .container{
width: 90%;
}
#foot .container .upper-f
{
padding: 2em;
}
#foot .container .bottom-f .bg-container-f
{
padding: 2em;
background-color: rgba(34, 55, 109, 0.85);
}
#foot .container .bottom-f .img-container
{
text-align: center;
}
#foot .container .bottom-f .title-trajes h6
{
text-transform: initial;
line-height: 0.8em;
color: white;
font-size: 0.9em;
font-weight: 600;
}
#foot .container .semi-title-pu
{
background: rgba(206, 39, 36, 0.8);
float: right;
}
#foot .container .semi-title-pu div span
{
padding: 0.5em;
}
<footer id="foot">
<div class="container">
<div class="upper-f">
</div>
<div class="bottom-f">
<div class="semi-title-pu">
<span>Proveedor de uniformes</span>
</div>
<div class="bg-container-f">
<div class="title-trajes">
<h6>testing</h6>
</div>
<div class="img-container">
<img src="./images/uniformalogo png.png" height="24">
</div>
</div>
</div>
</div>
</footer>
How can I float or put that div to right and achieve like the first image?

Answer 1

I changed the position of div content. As well as I added the margin-top to the bg-container-f to decrease the gap between big-container-f and semi-title-pu . You can change it as you want.
#foot {
background-image: url(https://images.pexels.com/photos/3184433/pexels-photo-3184433.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
background-size: cover;
}
#foot .container{
width: 90%;
}
#foot .container .upper-f
{
padding: 2em;
}
#foot .container .bottom-f .bg-container-f
{
padding: 2em;
background-color: rgba(34, 55, 109, 0.85);
margin-top:-15px;
}
#foot .container .bottom-f .img-container
{
text-align: center;
}
#foot .container .bottom-f .title-trajes h6
{
text-transform: initial;
line-height: 0.8em;
color: white;
font-size: 0.9em;
font-weight: 600;
}
#foot .container .semi-title-pu
{
background: rgba(206, 39, 36, 0.8);
float: right;
}
#foot .container .semi-title-pu div span
{
padding: 0.5em;
}
<footer id="foot">
<div class="container">
<div class="upper-f">
<div class="semi-title-pu">
<span>Proveedor de uniformes</span>
</div>
</div>
<div class="bottom-f">
<div class="bg-container-f">
<div class="title-trajes">
<h6>testing</h6>
</div>
<div class="img-container">
<img src="./images/uniformalogo png.png" height="24">
</div>
</div>
</div>
</div>
</footer>

Answer 2

try this:
#foot .container .semi-title-pu
{
background: rgba(206, 39, 36, 0.8);
float: right;
line-height: 1.2em;
transform: translateY(-1.2em);
}

Answer 3

Better to avoid float:right.
Instead use one of these:
text-align: right; on the text element itself. For this to work the text has to be in a block element like <p> or <div>, or you have to add a display: block; to the <span> element.
Put your text element inside of a container, for example a <div> and put display: flex; on it and make sure it's as wide as your page. Then add justify-content: flex-end; to the same container css. This will justify the span within it (and anything else) to the far right on the page.
If you want to have your element float on top of another element you can put the container and text inside or a larger container with a photo background-image. Or you can keep it outside the image container and pull it up on the photo with a negative margin or add position: absolute and use top, left, right and bottom positioning to fine tune the position.
Floats are taken out of the flow context of the html document and is a bit trickier to work with, that's why you should avoid it when you have better alternatives.
Try the red element outside the footer:
<section class="image-container">
<div class="semi-title-pu">
<span>Proveedor de uniformes</span>
</div>
</section>
<footer id="foot">
<div class="container">
<div class="upper-f">
</div>
<div class="bottom-f">
<div class="bg-container-f">
</div>
</div>
</div>
</footer>
Full code: https://jsfiddle.net/ks9tLhzp/
Result: