Float Example

by Michael Wagner

HTML

<header>
  <nav id="top-nav">
    <h1 class="logo"><a href="index.html">Gullible</a></h1>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="shop.html">Shop</a></li>
      <li><a href="visit.html">Visit</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<nav id="bottom-nav">
  <ul>
    <li><a href="shop.html">Men</a></li>
    <li><a href="women.html">Women</a></li>
    <li><a href="denim.html">Denim</a></li>
    <li><a href="suits.html">Suits</a></li>
    <li><a href="dresses.html">Dresses</a></li>
    <li><a href="accessories.html">Accessories</a></li>
  </ul>
</nav>

<div class="clothes">
  <div id="hoodie" class="pic"><img src="http://i.imgur.com/47iFqA1.jpg"/>
    <div class="overlay"></div>
    <div class="info">
      <p class="text"></p>
    </div>
  </div>
  <div class="jackets">
    <div id="jacket" class="pics"><img src="http://i.imgur.com/YJMNEtS.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
    <div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
  </div>
  <div id="" class="pic"><img src=""/>
    <div class="overlay"></div>
    <div class="info">
      <p class="text"></p>
    </div>
  </div>
</div>

<div id="footer">
  <div class="wrap"><strong>FIND US ON</strong>
     <ul>
       <li><a href="">Twitter</a></li>
       <li><a href="">Facebook</a></li>
       <li><a href="">Pintrest</a></li>
       <li><a href="">Instagram</a></li>
     </ul>
   </div>
   <div class="wrap"><strong>NAVIGATION</strong>
     <ul>
       <li><a href="">Home</a></li>
       <li><a href="">Shop</a></li>
       <li><a href="">Visit</a></li>
       <li><a href="">Newsletter</a></li>
     </ul>
   </div>
 </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);

html {
  height: 100%;
  box-sizing: border-box;
}

body {
    width: 1500px;
    text-align: center;
    font-family: arial;
    margin: 0 auto;
}

header ul {
   display: flex;
   list-style-type: none;
   justify-content: space-around;
   padding-bottom: 10px;
   align-items: center;
   border-bottom: 2px solid black;
   font-family: 'Source Code Pro';
}

footer ul {
  display: inline-block;
  list-style-type: none;
  align-items: center;
  font-family: 'Source Code Pro';

}

.logo {
    font-family: 'Source Code Pro';
    font-size: 40px;
    padding-top: 20px;
    font-weight: lighter;

}

/* Website nav code */
#top-nav ul {
    list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}


/* Shop nav code */
#bottom-nav {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  margin-top: 50px;
  padding-bottom: 10px;
  align-items: center;
  font-family: 'Crimson Text';
}

#bottom-nav ul {
    list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}

#bottom-nav ul li {
    display: inline-block;
    padding: 15px 20px 0 20px;
}

nav ul {
    list-style-type: none;
}

.info {
    display: none;
    color: #fff;
    left : 0;
    top : 45%;
    right : 0;
    text-align : center;
    position: absolute;
}

/* Images code */

.clothes {
  width: 65%;
  margin: auto;
}
.jackets {
  float: right;
}
#hoodie {
  float: left;
  width: 50%;
}
#jacket {
  float: right;

}
#jacket1 {
  float: right;
  clear: both;

}
/* Footer code */
#footer {
    background: black;
    text-align: center;
    color: white;
		width:100%;
		float:left;
	}

  .wrap {

  		position:relative;
  		margin:0 auto;
  		width:900px;
      height: 200px;
  	}

  .wrap ul {
    list-style-type: none;
  }