0

Ive done some looking around and I am still not sure what I am doing wrong with floats as of now. I have a section that I am working on. I currently have a border on it just so I can see the area its displaying in better. Though, when I delete this border the content shifts completely to a new area of the page.

I figure its probably something I have done wrong with my floats, but I have not been able to find anything online yet to help me figure out this problem. 

/*------------------------------------------------------------------
[ Basic CSS Startup ]
------------------------------------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  color: #777;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
}

.clearFix::after {
  overflow: auto;
  content: "";
  display: table;
  clear: both;
}

.container {
  max-width: 120rem;
  margin: 0 auto;
}

.site-container {
  max-width: 160rem;
  margin: 0 auto;
}


/* adds margin between sections */

.section-spacing {
  margin-top: 10rem;
}


/*------------------------------------------------------------------
[ Reusable CSS ]
------------------------------------------------------------------*/


/* Header Font Size */

.header-font {
  font-size: 2.5rem;
  font-weight: bold;
  color: #566467;
  margin-bottom: 5rem;
  text-transform: uppercase;
}

.content-font {
  color: #919191;
  line-height: 2rem;
  hyphens: auto;
}


/*------------------------------------------------------------------
[ Grid ]
------------------------------------------------------------------*/

.row {
  max-width: 120rem;
  background-color: #fff;
  margin: 0 auto;
  margin-bottom: 8rem;
}

.col-1-of-3 {
  width: calc((100% - 2 * 5rem) / 3);
  float: left;
}

.col-2-of-3 {
  width: calc(2 * ((100% - 2 * 5rem) / 3) + 5rem);
  float: left;
}

.col-1-of-3:not(:last-child) {
  margin-right: 5rem;
}


/*------------------------------------------------------------------
[ Header ]
------------------------------------------------------------------*/

.headerContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}

.headerText {
  margin: 5rem;
  color: #fff;
  font-size: 6.5rem;
  letter-spacing: .5rem;
  border-top: .2rem solid #fff;
  border-bottom: .2rem solid #fff;
  text-transform: uppercase;
  animation: fadeIn 3s ease-out;
}

.btn:link,
.btn:visited {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  padding: 2rem 4.5rem;
  cursor: pointer;
  display: inline-block;
}

.btn:hover {
  color: #000;
  transition: all .2s ease-in;
}

.btn-white {
  color: #fff;
  border: .2rem solid #fff;
  animation: fadeIn 3s ease-out;
}

.btn-white:hover {
  border: .2rem solid #000;
  transition: all .2s ease-in;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*------------------------------------------------------------------
[ SlideShow ]
------------------------------------------------------------------*/

.slide {
  width: 100%;
  height: 95vh;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.slides {
  height: 95vh;
  width: 100%;
  background-color: #252f31;
  overflow-x: hidden;
}

.slide_1 {
  background: url(../img/andromeda_1600_1000.jpg) no-repeat center center;
}

.slide_2 {
  background: url(../img/nasa_1600_1000.jpg) no-repeat center center;
}

.slide_3 {
  background: url(../img/spacex_1600_1000.jpg) no-repeat center center;
}


/* https://codepen.io/vavik96/pen/BRxxQx?editors=1100 */


/* Example of carousel */

.slide {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  animation: carousel-fade 15s linear infinite;
  -webkit-animation: carousel-fade 15s linear infinite;
  -moz-animation: carousel-fade 15s linear infinite;
  -ms-animation: carousel-fade 15s linear infinite;
}

.slide:nth-child(2) {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
}

.slide:nth-child(3) {
  animation-delay: 10s;
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -ms-animation-delay: 10s;
}

@keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@-webkit-keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@-moz-keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@-ms-keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}


/*------------------------------------------------------------------
[ Main Navigation ]
------------------------------------------------------------------*/

.navigation {
  background-color: #252f31;
  padding: 2.5rem;
}

.mainNav {
  float: right;
  list-style: none;
  text-transform: uppercase;
}

.mainNav li {
  margin-left: 4rem;
  display: inline-block;
}

.mainNav li a:link,
.mainNav li a:visited {
  color: #fff;
  text-decoration: none;
}

.mainNav li a:hover,
.mainNav li a:active {
  color: #2fca6f;
  cursor: pointer;
  transition: color .3s ease-in;
  text-decoration: none;
}

.stickyNav {
  position: fixed;
  top: 0;
  width: 100%;
}


/*------------------------------------------------------------------
[ Value Section ]
------------------------------------------------------------------*/

.values {
  margin-bottom: 10rem;
}


/*------------------------------------------------------------------
[ About Me ]
------------------------------------------------------------------*/

.about-container {
  max-width: 140rem;
}

img {
  height: 80rem;
  width: 60rem;
  margin-right: 1.5rem;
  display: inline-block;
  float: left;
  background-color: red;
}

.about-content {
  margin-left: 1.5rem;
  margin-top: 10rem;
  background-color: #f2f2f2;
  border: 1px solid red;
}

div p.content-font {
  margin-top: 5rem;
}
<section class="about-me site-container clearFix">
  <div class="about-container clearFix">
    <div class="img-content">
      <img src="img/house_sky_650_850.jpg" />
    </div>

    <div class="about-content clearFix">
      <h3 class="header-font section-spacing">About Me</h3>
      <p class="content-font">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut eu sem integer vitae justo eget. Leo a diam sollicitudin tempor id. Feugiat nisl pretium fusce id velit ut tortor.
      </p>
      <p class="content-font">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus interdum posuere lorem ipsum.
      </p>
    </div>
  </div>
</section>

The red portion is an image of the dimensions listed. To the right of that should be the content section. I set it up to end at the right side of the page so it keeps inline with the rest of the content of the page. Is there someone who could point out where I am going wrong here, I am still fairly new to CSS all things considered and just not figuring this out now after about an hour of fiddling about.

Craig Menne
  • 75
  • 10

0 Answers0