After clear:Both, float div does not align correctly

Asked

Viewed 328 times

2

I’m making a responsive website and I’m using "float" and "clear: Both" to put the Ivs in their places. But after using "clear: Both", the "div6" does not align correctly on the right side.

To clarify: ver a imagem HTML:

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Title</title>
</head>
<body>

<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="clear"></div>
<div class="div5">5</div>
<div class="div6">6</div>
</div>

</body>
</html>

CSS:

.clear
{
clear:both;
}

.container
{
width: 100%;
height:auto;
position:relative;
left: 0;
top: 0;
display:table;
background-color:#CCC;
}

.div1
{
background-color:#FF0;
position:relative;
width: 50%;
height:200px;
float:left;
margin-left:0;
}
@media screen and (max-width: 700px)
{
.div1
{
background-color:#FF0;
position:relative;
width: 100%;
height:200px;
float:left;
margin-left:0;
}
}

.div2
{
background-color:#FC0;
position:relative;
width: 50%;
height:40px;
float:right;
margin-right:0;
}
@media screen and (max-width: 700px)
{
.div2
{
background-color:#FC0;
position:relative;
width: 100%;
height:40px;
float:left;
margin-left:0;
}
}

.div3
{
background-color:#F90;
position:relative;
width: 50%;
height:40px;
float:right;
margin-right:0;
}
@media screen and (max-width: 700px)
{
.div3
{
background-color:#F90;
position:relative;
width: 100%;
height:40px;
float:left;
margin-left:0;
}
}

.div4
{
background-color:#F60;
position:relative;
width: 50%;
height:40px;
float:right;
margin-right:0;
}
@media screen and (max-width: 700px)
{
.div4
{
background-color:#F60;
position:relative;
width: 100%;
height:40px;
float:left;
margin-left:0;
}
}

.div5
{
background-color:#0C6;
position:relative;
width: 50%;
height:80px;
float:left;
margin-left:0;
}
@media screen and (max-width: 700px)
{
.div5
{
background-color:#0C6;
position:relative;
width: 100%;
height:80px;
float:left;
margin-left:0;
}
}

.div6
{
background-color:#396;
position:relative;
width: 50%;
height:40px;
float:right;
margin-right:0;
}
@media screen and (max-width: 700px)
{
.div6
{
background-color:#396;
position:relative;
width: 100%;
height:40px;
float:left;
margin-left:0;
}
}

I imagine that the solution to this is simple but I’m not able to solve this problem. I appreciate the help!

css float
  • 2

    Can I ask you a question? Since you are in the initial stage of the project, still in the construction of the grid, Pq you do not choose to do this grid with Flex and not with float? Float is an archaic technique so to speak, and Flex has a number of advantages, in addition to the alignment classes etc...

1 answer

0


What I can say is that yours float is working perfectly, only not the way you expected...

Notice that you put one div with clear:both, shortly after the div 4, with this you create a "break line" that cleans the flow of content and plays everything that comes after the div 4 to another bottom line and has another content stream.

inserir a descrição da imagem aqui

See that in the class of div that makes the clear I put an edge, so it’s easy for you to visualize where it "cuts" the flow. Nothing that comes under that div clear you will manage to pass for "top line"... unless with gambiarra... Which is what I did in this template below just to show you that it is possible but not indicated!

inserir a descrição da imagem aqui

So it is not because you can that you should... As I said in the comment, take advantage that you are at the beginning and consider using Flexbox in the know project!

Follow the image code above:

.clear {
    clear: both;
    border: 1px solid #000;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    display: table;
    background-color: #CCC;
}

.div1 {
    background-color: #FF0;
    position: relative;
    width: 50%;
    height: 200px;
    float: left;
    margin-left: 0;
}

@media screen and (max-width: 700px) {
    .div1 {
        background-color: #FF0;
        position: relative;
        width: 100%;
        height: 200px;
        float: left;
        margin-left: 0;
    }
}

.div2 {
    background-color: #FC0;
    position: relative;
    width: 50%;
    height: 40px;
    float: right;
    margin-right: 0;
}

@media screen and (max-width: 700px) {
    .div2 {
        background-color: #FC0;
        position: relative;
        width: 100%;
        height: 40px;
        float: left;
        margin-left: 0;
    }
}

.div3 {
    background-color: #F90;
    position: relative;
    width: 50%;
    height: 40px;
    float: right;
    margin-right: 0;
}

@media screen and (max-width: 700px) {
    .div3 {
        background-color: #F90;
        position: relative;
        width: 100%;
        height: 40px;
        float: left;
        margin-left: 0;
    }
}

.div4 {
    background-color: #F60;
    position: relative;
    width: 50%;
    height: 40px;
    float: right;
    margin-right: 0;
}

@media screen and (max-width: 700px) {
    .div4 {
        background-color: #F60;
        position: relative;
        width: 100%;
        height: 40px;
        float: left;
        margin-left: 0;
    }
}

.div5 {
    background-color: #0C6;
    position: relative;
    width: 50%;
    height: 80px;
    float: left;
    margin-left: 0;
}

@media screen and (max-width: 700px) {
    .div5 {
        background-color: #0C6;
        position: relative;
        width: 100%;
        height: 80px;
        float: left;
        margin-left: 0;
    }
}

.div6 {
    background-color: #396;
    /* position: relative; */
    width: 50%;
    height: 40px;
    float: right;
    margin-right: 0;
    /* float: right; */
    /* margin-right: 0; */
    
    position: absolute;
    top: calc(40px * 3);
    right: 0;
}

@media screen and (max-width: 700px) {
    .div6 {
        background-color: #396;
        position: relative;
        width: 100%;
        height: 40px;
        float: left;
        margin-left: 0;
        top: initial;
    }
}
<div class="container">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="clear"></div>
    <div class="div5">5</div>
    <div class="div6">6</div>
</div>

TIP

  • Thank you for the hugocsl reply was very enlightening. Actually the solution is a "Gambi" because it calculates the height of the Divs above to position the div6. In my case I believe that would not be the ideal solution because the above Divs may vary in quantity and height. But the FLEXBOX tip looks good. I did not know this resource and I am already navigating and studying to apply. I appreciate your time and your help that was very valuable. Great hug!

  • @Johnsnowdad guy has got a lot of stuff on Flexbox out there, you’ll see that it’s pretty easy to use and more flexible than the float. Bootstrap even uses Flex on their grid. If my answer helped you in any way and you think that the issue is resolved consider mark it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get the open question pending even though it has already been clarified. And if you have any questions with Flex in the future put there that we help you!

Browser other questions tagged css float

You are not signed in. Login or sign up in order to post.