css for a div overlaps divs which are floating?

Question

I am pretty much a beginner and I am trying to find out why doesn't my css work properly. The problem is that I set the background color to be green for a div with the id #zona6, but the color applies over the divs with the ids #zona2 and #zona3.

However, the background color has the same proportions as the div with the id #zona6, and, in the chrome inspect element, the div appears to be just where the color is, but the text in it is under #zona4 and #zona5, where it should be... I triple-checked the display and position of all the divs, they are all set to relative and block. Also, when I type things in the body element, the text in div #zona6 overlaps with it (this is kind of obvious becuase the div #zona6 is actually overlapping with #zona2 and #zona3).

I also tested it in Internet Explorer and I still can't find the issue, it must be simple, but I just don't get it.

#zona1 {
  height: 15%;
}
#zona2 {
  height: 35%;
  float: left;
  width: 50%;
  background-color: blue;
}
#zona3 {
  height: 35%;
  float: right;
  width: 50%;
}
#zona4 {
  height: 35%;
  float: left;
  width: 50%;
}
#zona5 {
  height: 35%;
  float: right;
  width: 50%;
}
#zona6 {
  height: 15%;
  background-color: green;
}

<div id="zona1">
  vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb
  twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr
</div>
<div id="zona2">
  vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb
</div>
<div id="zona3">
  ntrbrt
</div>
<div id="zona4">
  htrrwt
</div>
<div id="zona5">
  hb5ynyre
</div>
<div id="zona6">
  hh3653gterbwtebt
</div>

The index.css file is empty.

This is because, you are using % not fix px to the height. Percent calculate based on the content inside the element. Either put same content or PX in height. — Sudip Pal, Feb 14 '17 at 18:08

score 0 · Answer 1 · answered Feb 14 '17 at 18:11

Since you have used float values for some of the divs, you should apply float to remaining divs also. Since you have not given any float values for #zona6, it automatically places itself under #zona1 thats why you are seeing the div #zone6 to be overlapped with others. Provide float: left and width: 100% to bring it down

<html>

<head>
    <style>
        #zona1 {
            height: 15%;
            float: left;
        }
        
        #zona2 {
            height: 35%;
            float: left;
            width: 50%;
            background-color: blue;
        }
        
        #zona3 {
            height: 35%;
            float: right;
            width: 50%;
        }
        
        #zona4 {
            height: 35%;
            float: left;
            width: 50%;
        }
        
        #zona5 {
            height: 35%;
            float: right;
            width: 50%;
        }
        
        #zona6 {
            height: 15%;
            background-color: green;
            width: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="zona1">
        vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr
    </div>
    <div id="zona2">
        vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb
    </div>
    <div id="zona3">
        ntrbrt
    </div>
    <div id="zona4">
        htrrwt
    </div>
    <div id="zona5">
        hb5ynyre
    </div>
    <div id="zona6">
        hh3653gterbwtebt
    </div>
</body>

</html>

score 0 · Answer 2 · answered Feb 14 '17 at 18:12

You need to apply the clearfix technique when using float property. Apply the clearfix class on the elements after those who are "floating"

Then, include the following in your CSS:

.clearfix:after {
   content: '';
   display: block;
   clear: both;
}

Some help can be found here (in Portuguese)

score 0 · Accepted Answer · answered Feb 14 '17 at 18:14

0

Just add a Clear:both; to #zona6 that way it does not float to the nearest float
Here is a jsfiddle

answered Feb 14 '17 at 18:14

David Genger

875
10
25

score 0 · Answer 4 · answered Feb 14 '17 at 18:15

You are seeing the green background because of your float left properties on #zona4 and #zona5. The float is moving those elements outside of the typical document flow, and the green background is filling behind them, so they do not actually have a green background themselves. A clearfix should give you the effect you want. This is just one instance where floats can behave in odd ways.

One thing that might help you a lot is to be able to see the effects of each css property individually using inspect element. If you are using Chrome, Right click on the page and choose the inspect option, and then click on the html element on the page to see the css properties on the right. You can toggle each css property on and off to see the effect it has. -Alyssa

score 0 · Answer 5 · answered Feb 14 '17 at 18:18

It is simple to solve. It behaves like that because of display that isn't set. Just add display: inline-block to make it behave like... well... a block ;)

#zona1 {
  height: 15%;
}
#zona2 {
  height: 35%;
  float: left;
  width: 50%;
  background-color: blue;
}
#zona3 {
  height: 35%;
  float: right;
  width: 50%;
}
#zona4 {
  height: 35%;
  float: left;
  width: 50%;
}
#zona5 {
  height: 35%;
  float: right;
  width: 50%;
}
#zona6 {
  height: 15%;
  background-color: green;
  /* display: block; */ /* to make it appear on the next line. */
  display: inline-block;
}

<div id="zona1">
  vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb
  twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr
</div>
<div id="zona2">
  vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb
</div>
<div id="zona3">
  ntrbrt
</div>
<div id="zona4">
  htrrwt
</div>
<div id="zona5">
  hb5ynyre
</div>
<div id="zona6">
  hh3653gterbwtebt
</div>

I hope it helped :)

css for a div overlaps divs which are floating?

5 Answers5