CODEWITHSUNDEEP
htmlcss
hefc
hefc

Reputation: 21

Sidebar is not floating to right

I am trying to solve the issue with a floating sidebar.

I created blog-styled site, which has sidebar on the right of the text. The first page worked well and when changing the post of the page 2, the sidebar is not floating to the right anymore. Can somebody tell why it happens? Thanks.

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

.container {
  width: 1148px;
  margin: 20px auto;
}

.blog-post {
  width: 80%;
  /*background-color: rgba(100,134,134,.2);*/
  float: left;
  padding-right: 30px;
  position: relative;
}

.other-posts {
  display: inline-block;
  width: 20%;
  /*background-color: rgba(100,10,134,.2);*/
  float: left;
}

.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

h1,
h2 {
  margin: 20px 0;
}

p {
  text-align: justify;
  margin-bottom: 15px;
  line-height: 130%;
}

.author-box {
  border-top: 1px solid #808080;
  padding-top: 20px;
  padding-bottom: 20px;
}

.other {
  margin-bottom: 30px;
}

.author-text {
  font-size: 22px;
  float: left;
  margin: 30px 10px;
}

.author-box img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  float: left;
  margin-bottom: 20px;
}

.date {
  position: absolute;
  top: 30px;
  right: 30px;
}

.other a {
  text-decoration-line: none;
}
<!DOCTYPE html>
<html>

<head>
  <title>Test with CSS/a blog</title>
  <link rel="stylesheet" type="text/css" href="styles2.css">
</head>

<body>
  <div class="container">
    <div class="blog-post">
      <h1>This is my second blog build</h1>
      <p class="date">April 9th, 2019</p>
      <h2>Yeah, we talk about delphins again.</h2>
      <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse<br> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


      <div class="other-posts">
        <div class="other">
          <a href="#">The first post. What is the future of the TV.</a>
        </div>
        <div class="other">
          <a href="#">The second post. Yeah, we talk about delphins again.</a>
        </div>
        <div class="other">
          <a href="#">The third post. What should you know about CSS grid.</a>
        </div>
      </div>
      <div class="clearfix"></div>

      <div class="author-box">
        <img src="https://randomuser.me/api/portraits/women/66.jpg">
        <p class="author-text">mrs Janet Gonzales</p>
      </div>
    </div>
    <!-- container ending div -->
</body>

</html>

Upvotes: 1

Views: 56

Answers (1)

justDan
justDan

Reputation: 2336

Looks like you're missing a closing </div> tag for <div class="blog-post">. Insert a closing tag and I think you'll get what you're after.

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

.container {
    width: 1148px;
    margin: 20px auto;

}

.blog-post {
    width: 80%;
    /*background-color: rgba(100,134,134,.2);*/
    float:left;
    padding-right: 30px;
    position: relative;
}

.other-posts {
    display: inline-block;
    width: 20%;
    /*background-color: rgba(100,10,134,.2);*/
    float: left;
}

.clearfix:after {
    content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

h1,h2 {
    margin: 20px 0;
}

p {
    text-align: justify;
    margin-bottom: 15px;
    line-height: 130%;
}

.author-box {
    border-top: 1px solid #808080;
    padding-top: 20px;
    padding-bottom: 20px;
}

.other {
    margin-bottom: 30px;
}

.author-text {
    font-size: 22px;
    float: left;
    margin: 30px 10px;
}

.author-box img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    float: left;
    margin-bottom: 20px;
}

.date {
    position: absolute;
    top: 30px;
    right: 30px;
}

.other a {
    text-decoration-line: none;
}
<div class="container">
  <div class="blog-post">
    <h1>This is my second blog build</h1>
    <p class="date">April 9th, 2019</p>
    <h2>Yeah, we talk about delphins again.</h2>
    <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="other-posts">
    <div class="other">
      <a href="#">The first post. What is the future of the TV.</a>
    </div>
    <div class="other">
      <a href="#">The second post. Yeah, we talk about delphins again.</a>
    </div>
    <div class="other">
      <a href="#">The third post. What should you know about CSS grid.</a>
    </div>
  </div>
  <div class="clearfix"></div>

  <div class="author-box">
    <img src="https://randomuser.me/api/portraits/women/66.jpg">
    <p class="author-text">mrs Janet Gonzales</p>
  </div>
</div> <!-- container ending div -->

Upvotes: 2

Related Questions