Twitter Bootstrap Question posted in

Bootstrap how to float left a column to the top of the page-Twitter bootstrap

How can I float a column to right of the all above columns which are contained inside the same row.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="row content">
  <div class="col-md-8 first-content">
    Some content
  </div>
  <div class="col-md-8 second-content">
    Some other content
  </div>
  <div class="col-md-4 float-right-top">
    This content need to float left
  </div>
</div>

Please refer the image to get clear picture
enter image description here

Tags:

5

Answers


  1. 0

    Just add position: absolute, right: 0; and top: 0; to float-right-top class.

    HTML:

    <div class="row content">
  <div class="col-md-8" first-content>
    Some content
  </div>
  <div class="col-md-8 second-content">
    Some other content
  </div>
  <div class="col-md-4 float-right-top">
    This content need to float left
  </div>
</div>

    CSS:

    .float-right-top {
  position: absolute;
  right: 0;
  top: 0;
}

    Fiddle:
    https://jsfiddle.net/8Lurbc78/

    Login or Signup to reply.
  2. 0

    Try this

    working fiddle : https://jsfiddle.net/qeu3t8gk/

    .left{min-height:500px;}
.float-right-top{height200px; background:blue;top:0px;position:fixed;right: 0; }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="row content ">
  <div class="col-md-8 left" >
    Some content
  </div>
  <div class="col-md-8 left">
    Some other content
  </div>
  <div class="col-md-4 float-right-top">
    This content need to float left
  </div>
</div>
    Login or Signup to reply.
  3. 0

    The point is the class content which you used messed the css

    In every bootstrap row you have 12 columns. Now look at the code. You have assigned 8 columns to the first content class="col-md-8 first-content" so
    12-8=4 Therefore, only 4 columns remain for you, and you have assigned these 4 columns to the third div. Notice, that by default float is left. And everything starts from left. Therefore it would be placed in the right hand side of the row

    If you add extra space using margin between the divs then automatically it would be moved to the extra row in the below

    so make sure for all dives you have 

    margin :0px;

    Here is the complete code

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

  <div class="row">

        <div class="col-md-8">
            Some content
          </div>
            <div class="col-md-4">
            This content need to float left
          </div>
          <div class="col-md-8">
            Some other content
          </div>

  </div>


</body>
</html>

    What is wrong with ur code too?

    You have set 2 divs with col-8 in the same row. So, the browser calculates it as 8+8=16, and it understands also 16>12 (12 is maximum columns which you can have in a row). Therefore, it cannot afford it so it makes an extra row, and put your second div and allocate 8 columns to it in the second row.

    Please see the below image:

    enter image description here

    Login or Signup to reply.
  4. 0

    I’ve updated @StaXter answer.

    create to parent div for left and right and place your content inside them.

    HTML

    <div class="row content">
  <div class="right">
      <div class="col-md-8" first-content>
        Some content
      </div>
      <div class="col-md-8 second-content">
        Some other content
      </div>
  </div>
  <div class="left">
      <div class="col-md-4 float-right-top">
        This content need to float left
      </div>
  </div>
</div>

    CSS

    .right,.left{
  float:left;
}
.right {
  width:70%
}
.left{
  width:30%;
}
    Login or Signup to reply.
  5. 0

    How about nesting the rows? Fiddle here: https://jsfiddle.net/p3qrexxe/

    HTML

    <div class="row content">
  <div class="col-md-8 nomargin">
    <div class="col-md-12 first-content">
      Some content
    </div>
    <div class="col-md-12 second-content">
      Some other content
    </div>
  </div>
  <div class="col-md-4 nomargin">
    <div class="col-md-12 float-right-top">
      This content need to float left
    </div>
    <div class="col-md-12 float-right-top2">
    This content need to float left 2
    </div>
  </div>
</div>

    CSS

    .nomargin {padding: 0;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search