CODEWITHSUNDEEP
csstwitter-bootstrap-3
Nancy Moore
Nancy Moore

Reputation: 2470

absolute or fixed positioning not working with bootstraps and css

I have a page which is divided into two left and right columns. Am using bootstraps 3.

Here is my issue:

I want the left columns which contained image to be fixed while the right column will be scrollable as usual.

I have implemented position attributes fixed or absolute to the left column but it keeps the entire page jamming.

<!--left fixed column-->
<div class="col-sm-5" style="position:fixed">
  <img src="pic.png" class="img-responsive" style="height:100vh;">
</div>

or

<div class="col-sm-5" style="position:absolute">
  <img src="pic.png" class="img-responsive" style="height:100vh;">
</div>

here is the entire code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
  <body>
    <nav class="navbar navbar-fixed-top">
      <div class="container">
      
        <div class="collapse navbar-collapse" id="navgator" style="background:blue;color:white;height:40px;">
          <ul class="nav navbar-nav navbar-right">
    
            <a href="" class="myhome">Home</a>
         
          </ul>
        </div>
      </div>
    </nav>
    
    <div class="row">
      <!--left fixed column-->
      <div class="col-sm-5">
        <img src="pic.png" class="img-responsive" style="height:100vh;">
      </div>   
      <!--right scrollable column-->
      <div class="col-sm-7">
        Iam scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
        Iam me scrollable<br><br><br><br>
      </div>
    </div> 
  </body>
</html>

Upvotes: 0

Views: 83

Answers (1)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Give a position to img instead of col-sm-5.

Try This:

<!DOCTYPE html>
<html lang="en">
<head>

  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<body >

<nav class="navbar navbar-fixed-top">
  <div class="container">

    <div class="collapse navbar-collapse" id="navgator" style="background:blue;color:white;height:40px;">
      <ul class="nav navbar-nav navbar-right">

        <a href="" class="myhome">Home</a>

      </ul>
    </div>
  </div>
</nav>


 <div class="row">
<!--left fixed column-->
  <div class="col-sm-5">
<img src="https://www.isupportcause.com/r/images/previewImage.png" class="img-responsive" style="position: fixed;">
</div>

<!--right scrollable column-->

  <div class="col-sm-7">
Iam scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>
Iam me scrollable<br><br><br><br>

</div>


</div> 






</body>
</html>

Upvotes: 1

Related Questions