float-css overlaps next to div image

Question

My logo and navigation float to the left and right respectively when the screen gets to 40rem. However it overlaps with the next div which contains a background image. I tried setting margins but that just moved both logo/nav and the image lower on the page.

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
}

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


/* typography
    ================= */

.unstyled-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/* header
    ================= */

header {
  position: relative;
  left: 0;
  right: 0;
  margin: 1em;
}

.logo {
  width: 200px;
  height: 40px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 1em;
  padding: 0.125em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .75em;
  color: #DDD;
}


/* home-main
    ================= */

.home-main {
  background-image: url('../manjitcss/img/manjit-main.png');
  background-size: cover;
  background-position: center;
  padding: 10em 0;
}

@media(min-width:40rem) {
  .logo {
    float: left;
    margin-top: .5em;
  }
  nav {
    float: right;
  }
}

@media(min-width:60rem) {
  .logo {
    width: 250px;
    height: 50px;
  }
  nav {
    margin-top: .5em;
  }
  nav a {
    font-size: 1.04em;
  }
}

<header>
  <img src="../manjitcss/img/logo.jpg" alt="Foo logo" class="logo">

  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About Me</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="home-main">
  <div class="container">
  </div>
</section>

Can you provide working snippet code..? – ankita patel Sep 13 '17 at 05:12 — ankita patel, Sep 13 '17 at 05:12
i really dont understand can u do a screenshot – Fiido93 Sep 13 '17 at 05:21 — Fiido93, Sep 13 '17 at 05:21

score 3 · Accepted Answer · answered Sep 13 '17 at 05:27

You have .clearfix in your css, but you have not applied them to header whose contents you are floating.

Add the class to header - see demo below:

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
}

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


/* typography
================= */

.unstyled-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/* header
================= */

header {
  position: relative;
  left: 0;
  right: 0;
  margin: 1em;
}

.logo {
  width: 200px;
  height: 40px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 1em;
  padding: 0.125em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .75em;
  color: #DDD;
}


/* home-main
================= */

.home-main {
  background-image: url('../manjitcss/img/manjit-main.png');
  background-size: cover;
  background-position: center;
  padding: 10em 0;
}

@media(min-width:40rem) {
  .logo {
    float: left;
    margin-top: .5em;
  }
  nav {
    float: right;
  }
}

@media(min-width:60rem) {
  .logo {
    width: 250px;
    height: 50px;
  }
  nav {
    margin-top: .5em;
  }
  nav a {
    font-size: 1.04em;
  }
}

<header class="clearfix">
  <img src="http://placehold.it/50x50" alt="Foo logo" class="logo" />
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About Me</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="home-main">
  <div class="container">
   container
  </div>
</section>

thanks, that solved the problem. I thought clearfix was applied automatically to all header and footer, which is clearly wasn't! — ankit, Sep 13 '17 at 05:30

score 0 · Answer 2 · answered Sep 13 '17 at 05:12

0

When you use float try to use overflow property on parent. As float leaves its parent. Or you can use clearfix also.

answered Sep 13 '17 at 05:12

Aman

642
1
5
12

I used clearfix as well: .clearfix::after, section::after { content: ''; display: block; clear :both; } – ankit Sep 13 '17 at 05:15
Please refer this https://stackoverflow.com/questions/8554043/what-is-a-clearfix i think `display: table` will come. – Aman Sep 13 '17 at 06:18

score 0 · Answer 3 · answered Sep 13 '17 at 05:39

This is an issue with float. You may use clearfix or apply float for .home-main as below

@media(min-width:40rem) {
      .logo {
        float: left;
        margin-top: .5em;
      }
      nav {
        float: right;
      }
     .home-main{
        width: 100%;
        float: left;
      }
    }

float-css overlaps next to div image

3 Answers3