Clever Geek Handbook

CSS float floating everywhere but in the correct position

I am trying to fix this. I'm at a loss. I have searched and tried most of the solutions I could find but no luck.

I am creating a basic website as a standalone hobby project. I am trying to split the content of a page into two parts; Left and right. However, the left side always sits on top of the correct content. It's like ignoring commands float:left;

and float: right;

.

body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #DAA520;
}

#container {
  width: 80%;
  margin: 25px auto;
  background: #fff !important;
  border: 1px solid black;
  border-radius: 10px;
  overflow: auto;
}

.header img {
  padding-left: 30%;
  float: none;
}

.header {
  border-bottom: 5px solid #ccc;
  margin-bottom: 4px;
  height: 300px;
}

.nav ul {
  list-style: none;
  width: 100%;
  margin-top: 25px;
  text-align: center;
}

.nav li {
  float: left;
  width: 24%;
  box-sizing: border-box;
  border: 1px solid black;
  margin-left: 2px;
}

.nav li:hover {
  background: gold;
}

.banner img {
  display: block;
  height: 400px;
  width: 100%;
}

.sub1 h3,
p {
  float: left;
  margin-left: 10px;
  width: 48%;
  display: inline-block;
  position: relative;
}

.sub2 {
  float: right;
  margin-right: 10px;
  width: 48%;
  display: flex;
  display: inline-block;
  position: relative;
}
      

        
        
        
      

    
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/day1.css">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <title>Bakem and Shakem</title>
</head>

<body>
  <div id="container">
    <div class="header">
      <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">

      <div class="nav">
        <ul>
          <li>Home</li>
          <li>Recipes</li>
          <li>Contact</li>
          <li>Bakem</li>
        </ul>

      </div>
      <!-- navigation bar divider -->


    </div>
    <!-- header divider -->

    <div class="banner">
      <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
    </div>
    <div class="sub1">
      <h3>We make em, you bake em!</h3>
      <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta
        frankfurter.
      </p>

    </div>
    <!-- sub1 divider -->

    <div class="sub2">
      <form class="signup" action="index.html" method="post">
        <h3>Sign up for our news letter</h3>
        <p>Be apart of the bakem family</p>
        <input type="text" name="name" value="name"><label for="email" required>Name</label>
        <input type="email" name="email" value="email" required><label for="email">Email address</label>
      </form>
    </div>
    <!-- sub2 divider -->


  </div>
  <!-- conatiner divider -->


</body>

</html>
Run codeHide result


The main problem can be found in the sub1 and sub2 classes. I'm starting to think this must be another class where I created a rule that collides with this, I'm not sure.

+3


source to share


5 answers


You applied the style to the items in the left column, not the column itself. I was just stripping h3 and p from that .sub1 style rule and I think you are out of it. Due to the size of the page being rendered - best view the snippet in full screen mode, but you should see two columns of content at the bottom.



   body {
        font-family: 'Noto Sans', sans-serif;
        background-color: #DAA520;
      }

     #container {
     width: 80%;
     margin: 25px auto;
     background: #fff !important;
     border: 1px solid black;
     border-radius: 10px;
     overflow: auto;
     }

    .header img {
     padding-left: 30%;
     float: none;
       }

    .header {
     border-bottom: 5px solid #ccc;
     margin-bottom: 4px;
     height: 300px;
     }

    .nav ul {
     list-style: none;
     width: 100%;
     margin-top: 25px;
     text-align: center;
     }

    .nav li {
     float: left;
     width: 24%;
     box-sizing: border-box;
     border: 1px solid black;
     margin-left: 2px;
      }

    .nav li:hover {
     background: gold;
      }

     .banner img {
      display: block;
      height: 400px;
      width: 100%;
       }

    .sub1 {
     float: left;
     margin-left: 10px;
     width: 48%;
     display: inline-block;
     position: relative;
      }

    .sub2 {
     float: right;
     margin-right: 10px;
      width: 48%;
      display: flex;
     display: inline-block;
     position: relative;
      }
      

        
        
        
      

    
  <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/day1.css">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <title>Bakem and Shakem</title>
</head>

<body>
  <div id="container">
    <div class="header">
      <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">

      <div class="nav">
        <ul>
          <li>Home</li>
          <li>Recipes</li>
          <li>Contact</li>
          <li>Bakem</li>
        </ul>

      </div>
      <!-- navigation bar divider -->


    </div>
    <!-- header divider -->

    <div class="banner">
      <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
    </div>
    <div class="sub1">
      <h3>We make em, you bake em!</h3>
      <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta
        frankfurter.
      </p>

    </div>
    <!-- sub1 divider -->

    <div class="sub2">
      <form class="signup" action="index.html" method="post">
        <h3>Sign up for our news letter</h3>
        <p>Be apart of the bakem family</p>
        <input type="text" name="name" value="name"><label for="email" required>Name</label>
        <input type="email" name="email" value="email" required><label for="email">Email address</label>
      </form>
    </div>
    <!-- sub2 divider -->


  </div>
  <!-- conatiner divider -->


</body>

</html>
Run codeHide result


0


source 




body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #DAA520;
}

* {
  box-sizing: border-box;
}

#container {
  width: 80%;
  margin: 25px auto;
  background: #fff !important;
  border: 1px solid black;
  border-radius: 10px;
  overflow: auto;
}

.header img {
  width: 100%;
}

.header {
  border-bottom: 5px solid #ccc;
  margin-bottom: 4px;
  height: 300px;
}

.nav {
  display: inline-block;
  width: 100%;
}

.nav ul {
  list-style: none;
  width: 100%;
  margin-top: 25px;
  text-align: center;
}

.nav li {
  float: left;
  width: 24%;
  box-sizing: border-box;
  border: 1px solid black;
  margin-left: 2px;
}

.nav li:hover {
  background: gold;
}

.banner img {
  display: block;
  height: 400px;
  width: 100%;
}

.sub1 {
  display: inline-block;
  width: 50%;
  float: left;
}

.sub1 h3,
p {
  margin-left: 10px;
  display: inline-block;
  position: relative;
}

.sub2 {
  float: right;
  width: 50%;
  display: flex;
  display: inline-block;
  position: relative;
}
      

        
        
        
      

    
<div id="container">
  <div class="header">
    <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">
    <div class="nav">
      <ul>
        <li>Home</li>
        <li>Recipes</li>
        <li>Contact</li>
        <li>Bakem</li>
      </ul>
    </div>
  </div>
  <div class="banner">
    <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
  </div>
  <div class="sub1">
    <h3>We make em, you bake em!</h3>
    <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta frankfurter.
    </p>
  </div>
  <div class="sub2">
    <form class="signup" action="index.html" method="post">
      <h3>Sign up for our news letter</h3>
      <p>Be apart of the bakem family</p>
      <input type="text" name="name" value="name"><label for="email" required>Name</label>
      <input type="email" name="email" value="email" required><label for="email">Email address</label>
    </form>
  </div>
</div>
Run codeHide result


0


source


Reduced the width of the second section. There was no room for two sections on one line.

body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #DAA520;
}

#container {
  width: 80%;
  margin: 25px auto;
  background: #fff !important;
  border: 1px solid black;
  border-radius: 10px;
  overflow: auto;
}

.header img {
  padding-left: 30%;
  float: none;
}

.header {
  border-bottom: 5px solid #ccc;
  margin-bottom: 4px;
  height: 300px;
}

.nav ul {
  list-style: none;
  width: 100%;
  margin-top: 25px;
  text-align: center;
}

.nav li {
  float: left;
  width: 24%;
  box-sizing: border-box;
  border: 1px solid black;
  margin-left: 2px;
}

.nav li:hover {
  background: gold;
}

.banner img {
  display: block;
  height: 400px;
  width: 100%;
}

.sub1 h3,
p {
  float: left;
  margin-left: 10px;
  width: 48%;
  display: inline-block;
  position: relative;
}

.sub2 {
  float: right;
  margin-right: 10px;
  width: 45%;
  display: flex;
  display: inline-block;
  position: relative;
}
      

        
        
        
      

    
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/day1.css">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <title>Bakem and Shakem</title>
</head>

<body>
  <div id="container">
    <div class="header">
      <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">

      <div class="nav">
        <ul>
          <li>Home</li>
          <li>Recipes</li>
          <li>Contact</li>
          <li>Bakem</li>
        </ul>

      </div>
      <!-- navigation bar divider -->


    </div>
    <!-- header divider -->

    <div class="banner">
      <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
    </div>
    <div class="sub1">
      <h3>We make em, you bake em!</h3>
      <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta
        frankfurter.
      </p>

    </div>
    <!-- sub1 divider -->

    <div class="sub2">
      <form class="signup" action="index.html" method="post">
        <h3>Sign up for our news letter</h3>
        <p>Be apart of the bakem family</p>
        <input type="text" name="name" value="name"><label for="email" required>Name</label>
        <input type="email" name="email" value="email" required><label for="email">Email address</label>
      </form>
    </div>
    <!-- sub2 divider -->


  </div>
  <!-- conatiner divider -->


</body>

</html>
Run codeHide result


0


source


Well yupp you have a problem with this part:

.sub1 h3, p {
    float: left;
    margin-left: 10px;
    width: 48%;
    display: inline-block;
    position: relative;
  }

you do not have a rule for "one column", you apply rules to it, this is not correct.

just remove the "h3, p" part and I think you get what you want:

.sub1 {
        float: left;
        margin-left: 10px;
        width: 48%;
        display: inline-block;
        position: relative;
      }

https://jsfiddle.net/dwvv0x77/

0


source


comment on this class:

.sub1 h3, p {
/* float: left; */
/* margin-left: 10px; */
/* width: 48%; */
/* display: inline-block; */
/* position: relative; */
}

add this class:

.sub1 {
width: 50%;
float:left;
}

It should work!

0


source






More articles:


All Articles