2

I know how to fix the below code to make text ccc background as red. But I need to understand why below code is not showing red background color.

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
}
<div class="a">aa</div>
<div class="b">ccc</div>
Ayman Morsy
  • 1,279
  • 1
  • 10
  • 28
Nabil Rahiman
  • 21
  • 2
  • Replace `div.a` with `.a` & `div.b` with `.b` – Kundan Mar 14 '20 at 02:56
  • This should not make any difference in the given example. btw I know how to fix, but I would like to what is wrong with the above sample code – Nabil Rahiman Mar 14 '20 at 03:05
  • Removing `height` property should do. See [this](https://jsfiddle.net/3f9hy72u/). – kiner_shah Mar 14 '20 at 05:03
  • I added many duplicates explaining different situation similar to yours. Follow them carefully and you will get everything about floating and why you have this behavior – Temani Afif Mar 14 '20 at 10:36

5 Answers5

1

The cause of this is float CSS attribute and as mentioned by the documentation:

The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

There are many ways to deal with this situation and fix the flow of items surrounding a floating element one of them mentioned by the documentation too in clear section:

Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. See clear for examples.

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  clear: left;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="a">aa</div>
<div class="b">ccc</div>
</body>
</html>

also in your case you have to add floating right to your div.b to fix the flow of .b element in the page:

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  float: right;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="a">aa</div>
<div class="b">ccc</div>
</body>
</html>

another way to is add display:inline-block too:

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="a">aa</div>
<div class="b">ccc</div>

</body>
</html>

and another example:

div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="a">aa</div>
<br />
<div class="b">ccc</div>

</body>
</html>
ROOT
  • 11,363
  • 5
  • 30
  • 45
0

It has to do with the fact that div.a is a float and so div.b needs to be defined. Just adding float:left; to div.b resolves it. The answer may vary depending on what you're trying to achieve though.

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  height: 200px;
  width: 50%;
  background-color: blue;
  float: left;
}
div.b {
  height: 200px;
  width: 50%;
  background-color: red;
  float:left;
}
</style>
</head>
<body>

<div class="a">aa</div>
<div class="b">ccc</div>

</body>
</html>
dxdc
  • 435
  • 3
  • 8
  • what do you mean by "needs to be defined"? – Ayman Morsy Mar 14 '20 at 03:25
  • I found if I remove float from the first div it works ... and adding float to secound div like your solution it works but why ? what makes it invisible with one div float ? – Ayman Morsy Mar 14 '20 at 03:28
  • Because, then `div.a` is blocking the view of `div.b` otherwise. Increase the height of `div.b` in that scenario (e.g., 400px) you will see what I mean. – dxdc Mar 14 '20 at 03:31
  • I expected the text also be hidden because it is taken out of the normal flow of the document like absolute position – Ayman Morsy Mar 14 '20 at 03:47
  • Text can just overflow in that situation. Try setting div.b width > div.a width it is the same as I was saying earlier. – dxdc Mar 14 '20 at 03:55
  • yes I tried also I tried to switch float from left to right without adding float to second div the confusing part was in MDN definition of `float` vs `position absolute` they used the same words ` when an element is floated it is taken out of the normal flow of the document` || `absolute : The element is removed from the normal document flow` ... – Ayman Morsy Mar 14 '20 at 04:06
  • while `absloute ` in this case will hide text `float` will not – Ayman Morsy Mar 14 '20 at 04:09
  • @dxdc then overflow:hidden should hide text. div.b { height: 200px; width: 50%; overflow:hidden; background-color: red; } – Nabil Rahiman Mar 14 '20 at 04:13
  • @NabilRahiman there is no overflow as `Ma'moun othman` answer mention the main different between float and position absolute is that float even it removed from document flow it `still a part of document flow` where it makes text wrap around floated element rather than hidden behind it like in position absolute – Ayman Morsy Mar 14 '20 at 04:39
0

There is a red background, but underneath the blue div. The red div is static, so it will be rendered under float elements, because of how stacking context works in CSS.

bebewr
  • 96
  • 6
0

You have floated the div.a to left , now it is floated and div.b gets under div.b

So if you want to set it properly, you must set your floated div.a into a parent div, then apply below given css to clear the space under the floated div.a. , so that you can see your div.b

<!DOCTYPE html>
<html>

<head>
    <style>
        body::after {
            content: "";
            display: block;
            clear: both;
        }
        
        div.a {
            height: 200px;
            width: 50%;
            background-color: blue;
            float: left;
        }
        
        div.b {
            height: 200px;
            width: 50%;
            background-color: red;
        }
        /* then go for parent of floated div (div.a) and set this property to clear floated area beneath the div.a --> */
        
        #parent:after {
            clear: both;
            display: block;
            content: "";
        }
    </style>
</head>

<body>
    <!-- you must enclose the ddiv you want to float into another div  -->
    <div id="parent">
        <div class="a">aa</div>
    </div>
    <div class="b">ccc</div>

</body>

</html>
SAHIL KUMAR
  • 1
  • 1
  • I like your solution as you didn't modify my css code snippet. But still wondering why the text is not hidden from viewing it. – Nabil Rahiman Mar 14 '20 at 04:22
0
p {
  font-family: Lato;
}
    div.a {
      height: 200px;
      width: 50%;
      background-color: blue;
      float: left;
      position: relative;
    }
    div.b {
      height: 200px;
      width: 50%;
      background-color: red;
float:left;
position:relative;

    }



<div class="a">aa</div>
<div class="b">ccc</div>
CMS Develop
  • 72
  • 7