CODEWITHSUNDEEP
csshtmlcss-floatclearfix
ankit
ankit

Reputation: 125

float-css overlaps next to div image

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>

Upvotes: 2

Views: 1468

Answers (3)

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

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;
      }
    }

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 3

Aman
Aman

Reputation: 640

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

Upvotes: 0

Related Questions