CSS Floats won't work in header

Question

I am working on a header that contain a brand logo and a navigation. The header itself is contained in a div named container. The markup is like -

<div class="container">
    <div class="head">
        <div class="brand>Brand Name</div>
        <div class="nav'>Nav content Here</div>
    </div>
</div>

The CSS I am using is like

.container{
    width:100%;
    margin:10% auto;
}
.head{
    float:left;
    width:100%
}
.brand{
    float:left;
    margin:0 3%;
    width:auto;
}
.nav{
    float:right;
    margin:0 3%;
    width:auto
}

The Problem is that the all the content flows out of the Main container <div>and the container takes a height of 0px. The content is displaying as i want it to be but the main container is taking a height of 0px.

I want to display the brand logo and the navigation side by side. It would be great if you could make a fiddle with the code. Thanks in advance.

EDIT: Sorry for not researching before posting the question. The Clearfix hack is a life saver but there were several different ways also. Listed here - https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing

Siffer · Accepted Answer · 2016-03-28T08:04:33.147

You can use clearfix hack explained here

html:

<div class="container clearfix">
<div class="head">
    <div class="brand">Brand Name</div>
    <div class="nav">Nav content Here</div>
</div>

css:

.container{
    width:100%;
    margin:10% auto;
}
.head{
    float:left;
    width:100%
}
.brand{
    float:left;
    margin:0 3%;
    width:auto;
}
.nav{
    float:right;
    margin:0 3%;
    width:auto
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Fiddle here

Thank You. It saved me a lot of headache – Nishant Dixit Mar 28 '16 at 08:03 — Nishant Dixit, Mar 28 '16 at 08:03

G.L.P · Answer 2 · 2016-03-28T07:57:55.577

0

You have to use clearfix for .container div like this: Demo to automatically clear its child elements, which have float.

<div class="container clearfix">
  <div class="head">
    <div class="brand">Brand Name</div>
    <div class="nav">Nav content Here</div>
  </div>
</div>

and here corrected HTML syntax errors

edited Mar 28 '16 at 07:57

answered Mar 28 '16 at 07:52

G.L.P

6,913
4
20
39

score 0 · Answer 3 · answered Mar 28 '16 at 07:56

You got html issue:

<div class="brand>Brand Name</div>

and:

<div class="nav'>Nav content Here</div>

I fixed these and it wokring fine! without changing your `css

<div class="container">
    <div class="head">
        <div class="brand">Brand Name</div>
        <div class="nav">Nav content Here</div>
    </div>
</div>

jsFiddle

score 0 · Answer 4 · answered Apr 05 '16 at 09:47

0

    <div class="brand>Brand Name</div>
    <div class="nav'>Nav content Here</div>

change to

<div class="brand">Brand Name</div>
<div class="nav">Nav content Here</div>

answered Apr 05 '16 at 09:47

VishnuKumar Pv

167
1
13

CSS Floats won't work in header

4 Answers4