Float issue with header and sections

Question

I'm not understanding why my header formatting (background yellow) isn't working. When I remove the "float:left;" from the "lefthead" and "righthead" ids, it works.

Any ideas? Hard to verbalize the question so hopefully you understand what I'm saying with the code below. Thanks very much!

header {
  background-color: yellow;
  /*why doesn't this work? */
}
#lefthead {
  float: left;
  width: 50%;
  text-align: center;
  background-color: blue;
}
#righthead {
  float: right;
  text-align: center;
  width: 50%;
}

<header>
  <section id="lefthead">
    <h1>It's My High School</h1>
  </section>

  <section id="righthead">
    <h1>Me and my minions </h1>
  </section>

</header>
<section style="clear:both;">
  <h1>blah and stuff and all</h1>
</section>

Possible duplicate of [Which method of ‘clearfix’ is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) — Travis J, Oct 06 '15 at 19:47
The problem here is that using float takes those elements out of the flow of the document. The result is that the containing element (header) has no height and as a result will not show the background color. The solution is to cause the floated elements to have their height show, the shown duplicate has a set of solutions for that. As does this post: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing?rq=1 — Travis J, Oct 06 '15 at 19:48
@Travis your hyperlink is good to understand how float may function, but it does not answer the above question. The 'header' here is not like a header on top of an html page. It is used as a
. I will request that you take away your down vote from my response. — Mugé, Oct 06 '15 at 20:03
@mugé - You are completely missing the point of the problem here. That the element is an html5 custom element ("header") does not matter. All html5 elements are treated as display:block elements (essentially just default div elements). The link shows how to make the floated content's height reflect inside of the html5 element. Please read up on how the flow of the document works. — Travis J, Oct 06 '15 at 20:15
@TravisJ can you please kindly give the correct answer to the original poster and myself, so we are aware how it SHOULD be. Thank you. I appreciate your dedication. If you make it better, I will delete my answer. — Mugé, Oct 06 '15 at 20:23
@muge - Content duplication is not something that is encouraged here. That is why the link to the correct answer was given above. — Travis J, Oct 06 '15 at 20:25
@mugé Travis comment does answer the question, when you use float the children element add no height to the parent element. So it is as if he has a 0px header. So the color doesn't appear. — Greg, Oct 06 '15 at 21:06
@Greg I deleted my answer. Can undelete and we can correct from there, but I am frustrated by these guys who give you links and want you to read a book instead of giving a solution to problem. Thank you for your explanation. — Mugé, Oct 06 '15 at 21:08
@mugé You can undelete, but if you want me to edit I will have to basically redo the whole thing. Would it be better for me to tweak my answer? — Greg, Oct 06 '15 at 21:10

Greg · Answer 1 · 2015-10-07T13:53:41.800

The reason you're encountering this problem is due to how float actually works. When you build a container element, then float the children inside the floated elements will not apply any height to the parent element, your container.

Due to the structure of your markup, you instantly float those children elements, this doesn't add height so the background: yellow; never actually displays. If you add height or padding the color will appear though.

You can read more on float here.

This will instantly show your background:

header {
     height: 4.3rem;
     background: yellow;
}

Update: (Demonstrate Clearfix, proper approach)

You could solve your problem by applying a clearfix to the solution. For instance you could structure the markup in the following fashion:

<header>
     <div class="Clearfix">
          <section id="Left-Head">
               <h1>Sample Solution</h1>
          </section>
          <section id="Right-Head">
               <h3>Content</h3>
          </section>
     </div>
</header>

Then you would use the existing style information, but add the following as a Clearfix.

.Clearfix:before, .Clearfix:after {
     height: 0rem;

     content: '';
     display: block;
     clear: both;
}

Then the background would properly append.

Full Solution:

header {
     background: yellow;
}

.Clearfix:before, .Clearfix:after {
      height: 0rem;

      content: '';
      display: block;
      clear: both;
}

#Left-Head {
     width: 50%;
     background: blue;
     float: left;
}

#Right-Head {
     width: 50%;
     float: right;
}

h5 {
     clear: both;
}

<header>
 <div class="Clearfix">
      <section id="Left-Head">
           <h1>Sample Solution</h1>
      </section>
      <section id="Right-Head">
           <h3>Content</h3>
      </section>
 </div>
</header>
<h5>Lorem Ipsum...</h5>

There is still the 50/50 'Left-Head' and 'Right-Head' part to be added with the blue background. I tested if your solution would work since you have header a height and so did I. @TravisJ prefered not to take off his down-vote. I changed 'header' from element into class. I agree it could have been left out with html5, but still correct. I hope you can up-vote my response to come to at least to the acknowledgement of correctness. Thank you for your help. — Mugé, Oct 07 '15 at 12:05
I don't know. I would not be able to down vote twice, but will up vote you. — Mugé, Oct 07 '15 at 13:45
if you do edit on color, I will be able to up vote. At the moment the answer is not complete for the OP. Since OP has not made any comment until now, I doubt he cares. — Mugé, Oct 07 '15 at 13:47
I am surprised my up vote counted as 2. Thank you, Greg, for your considerate approach on this site. — Mugé, Oct 07 '15 at 13:54

Mugé · Answer 2 · 2015-10-07T12:08:05.353

0

EDITED:

Turned the 'header' into class.

See code snippet please.

.header {
  background-color: yellow;
  height: 72px;
  width: 100%;
 }

.lefthead {
  float: left;
  width: 50%;
  text-align: center;
  background-color: blue;
}
.righthead {
  float: right;
  text-align: center;
  width: 50%;
}

<div class="header">
  
  <section class="lefthead">
    <h1>It's My High School</h1>
  </section>

  <section class="righthead">
    <h1>Me and my minions </h1>
  </section>

</div>

<section style="clear:both;">
  <h1>blah and stuff and all</h1>
</section>

edited Oct 07 '15 at 12:08

answered Oct 06 '15 at 19:42

Mugé

441
3
14

Your html is malformed as there is no closing div. If you properly closed the div then this still does not work. – Travis J Oct 06 '15 at 19:46
@Travis the above is not MY html. It is the OP's html. I only made the background color work. He can arrange his own html. Why would you down-vote me?? – Mugé Oct 06 '15 at 19:52
You changed the html, making the changes yours. The change you made as shown above was `
` which was an attempt at introducing a class definition; this was the point of your answer. However, the introduced div has no closing div making that div span the entire area of the body. The result is that the background shows up. This changes the composition of the page though, and closing the div where the header element (now missing an opening tag) would reproduce the op's shown problem. This answer does not provide a solution to the problem, and merely introduces another issue.
– Travis J Oct 06 '15 at 20:12
@TravisJ If you look at the html file of original poster and mine, you will see that there is a closing I checked that before I posted. Either way, if you put a after section1 or section2, it does not change anything in the design. – Mugé Oct 06 '15 at 20:21
See edits, your code snippet does not work. Closing the div in the appropriate place makes the yellow not show. This is because the containing elements inside of the div are floated and are not in the flow of the document. This results in the height of the containing element, now your div, being 0 and not having a background. – Travis J Oct 06 '15 at 20:23
@TravisJ it was working before. Since you edited, it is not working. – Mugé Oct 06 '15 at 20:28
You changed the composition of the problem, essentially all your "fix" was doing was setting the body of the page's background to yellow which is not addressing the problem. It was never working, you simply posted malformed html. – Travis J Oct 06 '15 at 20:29
@TravisJ is that what you meant? Check out my changes. – Mugé Oct 06 '15 at 20:48
You have now given the containing element an explicit height which allows some of the yellow to show up. This is however not a solution to the problem. The solution is clearly given in the linked duplicate. – Travis J Oct 06 '15 at 20:53

score 0 · Answer 3 · answered Oct 13 '15 at 19:17

header {
  background-color: yellow;
  /*why doesn't this work? */
}
#lefthead {
  float: left;
  width: 50%;
  text-align: center;
  background-color: blue;
}
#righthead {
  float: right;
  text-align: center;
  width: 50%;
}
.clear{clear:both}

<header>
  <section id="lefthead">
    <h1>It's My High School</h1>
  </section>

  <section id="righthead">
    <h1>Me and my minions </h1>
  </section>
<section class="clear">
</header>

  <h1>blah and stuff and all</h1>
    </section>

Float issue with header and sections

3 Answers3