CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

Why my content is covered on my footer even I use clear:both to footer?

html,
body{
    height: 100%;
    margin:0;
    padding:0;
}

#fake-content {
    height:900px;
    width:100px;
}

.readbook .col-sm-12 {
  position: relative;
  border-top:2px solid #dddddd; 
}

.book-body {
  position: absolute;
  left:0;
  top:0;
  right:0;
  height:100px;
  padding:0px 70px 0px;
  overflow-y:auto;
}

.body-inner {
  margin-top: 20px;
}

.body-inner {
  border: 1px solid red;
  z-index:1;
  height:500px
}

.navbar-footer {
  background-color: #f8f8f8;
}

.footer {
  text-align: center;
}
.footer p {
  font-size: 10px;
  margin:0;
  text-align:center;
  padding-top:53px;
  display:inline-block;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -120px;
}

.navbar-footer, .push {
height: 120px;
}


.last-content {
  margin-bottom:144px;
}

.navbar-footer {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper"> 
<div id="fake-content"></div>
<div class="container readbook">
  <div class="row">
    <div class="col-sm-12">
      <div class="book-body">
        <div class="body-inner">
          <div class="page-wrapper">
            <h4>2.Test</h4>
              <p>
                    Content
              </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="push"><!-- not put anything here --></div>
</div>

<!-- footer -->
    <div class="navbar-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="footer">
                <p>CO.,LTD @ 2015 ALL Rights Reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

I use position: absolute to my content for some reason so I put clear:both to footer in css file.However, the content still cover on my footer.

What can I do to not have content cover on footer?

Is clear:both not allowed to work for position:absolute?

Upvotes: 0

Views: 43

Answers (1)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17954

Because clear: both clears floats, nothing else. you have not any floats to be cleared.

P.S. your design has many problems with it. I suggest you to begin reading on CSS.

Upvotes: 2

Related Questions